CSS로 스타일을 적용하기 위해서는 CSS의 문법을 사용해줘야 합니다. CSS의 문법은 SPV를 기억해주면 됩니다 바로 S(Selector, 선택자) P(Property, 속성) V(Value, 속성값)입니다. 적용하고자 하는 태그(또는 id, class)를 선택자라고 하고 CSS에서 제공하는 디자인 관련 속성을 속성, 그 속성에 맞는 값을 속성값이라고 합니다. 위 사진을 예로 들면 HTML 문서의 p 태그를 선택자로 설정하였습니다. 그리고 중괄호 안에 background-color라는 배경색을 주는 속성과 color라는 글자색을 주는 속성을 이용하였습니다. 각각 값은 black, white로 배경은 검은색, 글자색은 하얀색으로 주고자 했습니다. Hello World! 참고 : 위 스타일을 적용할 htm..
웹언어에서 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와의 분업 기능을 할 때 서로 통신할 수단으로서도 가치가 있는 태그입니다. 또한 그 자체에 의미가 없는 태그입니다. 문단의 특정 부분에 이름을 붙이는 역할로 와 비슷한 역..
