앞서 CSS 세가지 요소에 대해 말했습니다. S (Selector, 선택자) P (Property, 속성) V (Value, 속성값) 이 있고 문법은 S {P : V;} 와 같이 사용할 수 있습니다. 이렇게 CSS 문법을 적용할 때 스타일 적용 대상을 명확히 해야 의도한대로 웹 페이지의 스타일이 적용될 수 있습니다. 따라서 스타일을 적용할 대상을 지정하는 선택자는 매우 중요한 요소라고 생각합니다. ★★★★★ (별이 다섯개!) 이번 포스팅에서는 선택자 중에서 기본이 되는 선택자들을 살펴보겠습니다. Tag 선택자 선택자 중 가장 많이 사용하는 선택자가 바로 Tag 선택자입니다. 적용할 태그 이름 { 속성1 : 속성값; ...}과 같은 방식으로 사용할 수 있습니다. 이전 포스팅에서 태그에 적용한 방법이 태그 ..
웹언어에서 HTML의 단짝이라고 생각하는 언어가 바로 CSS입니다. CSS는 정보를 표현하는 HTML에 화장을 해주는 언어입니다. 한마디로 디자인을 담당하는 언어가 바로 CSS가 되는 것이죠. CSS는 HTML문서의 배경, 글자 등의 디자인 뿐만 아니라 HTML Element의 배치까지도 변화시킬 수 있는 언어입니다. CSS가 어떻게 탄생하게 되었는지는 w3schools에 나와있습니다. 출처 : https://www.w3schools.com/css/css_intro.asp / 왜 CSS가 사용되는지와 CSS의 탄생 동기에 대해 설명하고 있습니다. HTML은 태그를 통해 각각의 Element를 표현합니다. 그 표현하는 태그들도 다양한데 HTML 3.2 시절에 폰트, 색상 관련 속성이 도입되었지만 모든 태그..
HTML5 이전에 많은 웹페이지에서 태그에 id와 class를 이용하여 문서의 구역을 표시했다고 합니다. 와 같이 말이죠 이렇게 쓰이는 태그들이 많아지자 HTML5에서는 의미론적인 태그로 , , , 등의 태그들을 사용할 수 있게 됐습니다. 여기서 와 의미론적 태그들은 보이는 것에는 차이가 없지만 의미적으로 차이가 있습니다. 는 브라우저가 안에 담고있는 내용이 어떤 걸 담고 있는지 알지 못합니다. 하지만 의미론적 태그들을 이용하면 그 내용들이 어떤 것을 담고 있는지 의미를 브라우저가 분명하게 알 수 있도록 해줍니다. 를 쓰면 제목, 를 이용하면 네비게이션(목자) 등의 의미를 알 수 있도록 말이죠. 출처 : www.w3school.com 위 사진의 태그들은 HTML5에서 제공하는 의미론적 태그들입니다. 이번..
저번 포스팅에 와 을 썼었는데 개별적으로 다룰 가치에 있는 태그들이라 생각해서 따로 포스팅해봅니다 ㅎㅅㅎ 나중에 CSS를 이용하여 스타일을 지정할 때 개별 문단에 대해 일일이 속성을 지정하는 것보다 비슷한 유형의 문단에 그룹을 지정하여 한꺼번에 스타일을 지정하는게 아무래도 효과적일 것입니다. 이때, 비슷한 문단들을 묶어주는 태그가 바로 입니다. 사실, 는 다른 Element들을 감싸 하나의 그룹으로 만드는 역할을 할뿐 에 있는 기능은 없습니다. 하지만 는 HTML문서의 layout을 위해 사용하거나 HTML, CSS, JavaScript와의 분업 기능을 할 때 서로 통신할 수단으로서도 가치가 있는 태그입니다. 또한 그 자체에 의미가 없는 태그입니다. 문단의 특정 부분에 이름을 붙이는 역할로 와 비슷한 역..
