반응형 🎪 놀고있네/HTML & CSS42 [CSS] CSS 기본 문법, 사용방법 안녕하세요 냥장판 입니다 앞에서 CSS 개념에 대해 배웠었죠 이번 게시글에서는 CSS 문법에 대해서 살펴볼거에요. 1. CSS 기본 구조 CSS는 선택자(selector)와 선언부(declaratives)로 구성됩니다. 선택자는 CSS를 적용하고자 하는 HTML Tag/elements가 오고요 선언부는 중괄호({ })안에 위치하고, 선언들은 세미콜론(;)으로 구분합니다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다. style=".. 2020. 1. 21. [CSS] CSS를 사용하는 이유 안녕하세요 냥장판 입니다 이번 게시글은 CSS에 대한 아주 기초적인 지식에 대해 다룰거에요. HTML을 다루다보면, CSS stylesheet 라는 말을 들어본적이 있을겁니다. CSS는 왜 사용하며, 어떻게 사용하는지 살펴볼게요. 1. CSS란 CSS는 Cascading Style Sheets의 약자로 종속형 스타일 시트, 캐스케이딩 스타일 시트 라고 불립니다. 마크업 언어(XML, HTML 등)의 레이아웃과 스타일을 나타내는 언어에요. 우리의 맨얼굴과 맨몸뚱아리를 HTML이라고 한다면 화장하고, 옷입고, 악세사리하는 모든 꾸며주는 것들을 CSS라고 생각하면되요. 안꾸미고 나가도 되죠. HTML문만 있어도 된다는 말입니다. 꾸미고 나가나요? 그럼 CSS를 입고 나간다는 말이에요. W3C(World Wid.. 2020. 1. 20. [HTML] display 요소(p, div, span)의 차이점 목표: p, div, span 등의 차이점 요약 Display 요소의 특징(block과 inline 개념 파악하기) 안녕하세요 냥장판 입니다 HTML 배우는 초기에 단락(paragraph)은 p, 레이아웃 분할(division)은 div, 특정 부분(span)만 묶어주는 span 에 대해서 들어본적이 있을거에요. 들어본적이 없더라도 보셨을거라 생각합니다 이들의 차이점에 대해서 설명해 드릴게요 그 전에 display 속성값의 특징에 대해 잠깐 알고가야해요 1. Display 요소값의 특징(Block, Inline) Display 요소는 두개의 특징을 가져요 Block Inline 차이점은 아래서 보실테지만, 새로운 요소값을 사용할 때 시작줄이 새로운 줄이냐 아니냐로도 나뉩니다. 2. Block-level .. 2020. 1. 17. [HTML] charset 의 중요성 ❤ 목표: charset은 왜 쓰는거죠?요약인코딩(Encoding)과 관련있음 안녕하세요 냥장판 입니다 HTML문을 살펴보면 상단에 아래와 같은 구문이 작성된 걸 아주 얼핏 보셨을거에요 그냥 무심코 지나쳤던 charset 의 소중함을 알려드릴게요! 1. 인코딩(Encoding)과 관련있음 인코딩은 내가 작성한 구문을 컴퓨터가 해석할 수 있게 변환 해주는거에요. 자세한 설명은 아래를 참고하시고요.2019/11/28 - [놀고있네/i18n] - [Characters] 글자가 깨져요[Characters] 글자가 깨져요목표: 글자가 깨지는 이유를 알아보자 요약 문제는 인코딩(encoding) 표준화된 인코딩 방법: Unicode 웹서핑 또는 문서를 열었을 때, 외계 문자를 본적 있을 것이다. 갑자기 컴터가 암에 걸.. 2020. 1. 16. [HTML] Link 태그 사용하기 - 새창에서 페이지 열기 안녕하세요 냥장판 입니다 여기를 눌러보세요 링크를 누르면 새창에서 페이지가 열리죠? 링크를 걸 때 새창에서 열기를 설정해서 그래요. 그럼 이거는 어떤가요? 두 개가 페이지를 여는 방식이 다르죠! 이번 게시글에서는 Link 태그를 사용해서 페이지 여는 속성을 확인해봅시당! target 속성 target 속성은 링크를 어디에서 여는지에 대해 설정할 수 있어요. 속성 내용 _blank 새 창이나 새 탭에서 페이지 열기 _self 현재 프레임(frame)에서 페이지 열기(기본설정) _parent 부모 프레임(frame)에서 페이지 열기 _top 현재 창에서 full window로 페이지 열기 target 속성 사용방법 target 속성은 아래와 같이 작성합니다. 링크 걸어주고, target에 속성값 넣으면되요!.. 2020. 1. 15. [HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 목표: 크롬에서 HTML 작업하는 방법 요약 크롬 내 개발자 도구를 실행한다 Sources > Filesystem에 workspace를 추가한다. 안녕하세요 냥장판 입니다 HTML 문서를 만들어서 테스트해보고 싶을 때, HTML 문서를 수정하고 싶을 때 특정 도구를 설치할 필요없이 Chrome에서 작업이 가능하답니다! 저는 HTML 문서 말고도 Java나 SQL문을 공부하고 있어서 별도의 에디터를 사용하고 있어요. 그런데 HTML 문서만을 위해 특정 에디터를 설치하는 건 너무 낭비같아서 Chrome을 활용한 방법을 알려드릴게요! 1. 크롬 내 개발자 도구 실행 크롬을 실행하면 페이지 오른쪽 상단에 설정 창을 클릭해주세요. 개발자 도구(Developer tools) 메뉴를 클릭해 주세요. 그러면 아래 그림.. 2020. 1. 14. [HTML] Link 태그 사용하기 - 맨위로 이동 목표: Link 태그를 활용해서 맨위로 이동 구현하기 요약 id(아이디) 달아주기 href에 해당 id 링크하기 안녕하세요 냥장판 입니다 웹페이지를 쭉 내리다가 맨 위로(페이지 상단) 올라가고 싶을 때가 있죠? 웹서핑이든, 쇼핑이든 페이지 상단으로 올라갈 때 우리는 TOP 이미지나 버튼을 클릭합니다. 이번 게시글에서는 위로 올라가는 방법(?) 알려드릴게요! 일단 징그럽게 긴 텍스트를 입력합니다; 스크롤바가 있고, 밑으로 내려가다가 맨 위로 가려면 마우스를 계속 굴려야해요 1. id(아이디) 달아주기 각 요소마다 아이디(id)를 달아주는 거에요 이동하고 싶은 곳 속성에 id를 달아주세요 2. href 에 해당 id 링크하기 그래서 맨 아래에 내려갔을 때 Link 태그에서 해당 id를 가진 속성을 호출하는 .. 2020. 1. 11. [HTML] Link 태그 사용하기 - download 속성 안녕하세요 냥장판 입니다 지난 게시글에서는 Link 태그 기본사용법에 대해서 살펴봤어요 2020/01/09 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 기본편 [HTML] Link 태그 사용하기 - 기본편 목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이.. miaow-miaow.tistory.com 이번 시간에는 Link 태그로 이미지를 올려놓고, 이 이미지를 다운받을 때 사용하는 속성에 대해 알려드릴게요 1. download 속성 download 속성 사용방법은 아래와 같아요... 2020. 1. 10. [HTML] Link 태그 사용하기 - 기본편 목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이미지 파일 등을 연결할 때 사용합니다. 말 그대로 링크한다는 개념이에요. 위에 그림을 보면 Hello 라는 컨텐츠에 a 태그와 href 속성을 사용해서 링크를 한다는 개념입니다. 자세히 살펴보죠 1. URL 하이퍼링크 걸기: href 링크(a) 태그는 반드시 href 속성이 설정되어 있어야됩니다. href 속성이 없다면, 다른 속성(target, download, rel, rev, hreflang, type, referrerpolicy)들도 사용할 수 없어요. 기본 .. 2020. 1. 9. 이전 1 2 3 4 5 다음 반응형
