3일차 - HTML과 CSS에 대한 두 번째 시간

복잡해 보이지만 언젠가 저렇게 치고 있겠지?

HTML의 head와 body 섹션

 

2일차 포스팅에서 봤던 이미지에서 봤듯이 웹사이트를 만들 때 항상 접하게 되는 섹션이 있다.

항상 보게 되는 섹션

head섹션과 body섹션이다.

 

• head 섹션: 사용자가 웹페이지를 열었을 때 내용이 눈에 보이지는 않지만 이미지처럼 페이지에 대한 메타데이터와 title 등의 데이터를 포함하는 섹션이다. HTML문서에서 style을 이용하여 css 코드를 바로 넣을 때도 이 섹션에 넣게 된다.
• body 섹션: HTML 문서의 내용을 나타내는 섹션이다. 그래서 대부분의 코드는 이 body 섹션에 위치하게 된다. 또한, 한 문서에 하나의 body 섹션만 존재할 수 있다. 

HTML 태그 - a(앵커) 태그

 

a 태그는 제작중인 웹페이지에서 다른 웹페이지나 웹사이트로 링크를 걸 수 있는 태그이다.

a 태그의 활용

위 이미지처럼 '구글 바로가기'라는 문자에 앵커태그를 활용해서 구글 사이트로 이동할 수 있게 링크를 걸어보았다.

참고로 앵커태그의 href는 모든 태그에서 쓸 수 있는 속성이 아니며, 앵커태그에서 쓸 수 있는 속성이다.

 

2일차에 이은 CSS 기초

 

CSS는 콘텐츠 및 페이지의 스타일과 모양을 설정하는 데 사용된다. 

 

그리고 2일차에 css 코드를 별도의 파일에 넣어 HTML 문서와 연결하여 사용했는데, 그 방법뿐만 아니라 HTML 문서 내에 style 섹션을 만들어 css 코드를 입력할 수도 있다.

HTML문서 내의 CSS 코드 입력

이러한 글로벌 CSS 스타일의 장점은 인라인 스타일(html의 태그 옆에 붙이는 것)보다 하나의 CSS 규칙이 페이지의 여러 요소에 적용될 수 있다는 것이다. 

 

인라인 스타일을 사용하면, 입력할 코드가 1~2개면 쓸 수 있겠지만, 그 이상이 되면 코드도 복잡해 보이고, 가독성이 떨어진다. 그리고, 같은 코드를 쓸 일이 있을 때 일일이 복사, 붙여넣기를 해야하는 애로사항이 있다.

 

그래서 꼭 별도 css 파일을 연결하여 쓰거나, style 섹션 내에 입력하는 것을 추천한다.

그리고, 위의 이미지에서 볼 수 있듯 CSS 코드는 선택자와 중괄호로 구성되는데, 여기서 선택자란 CSS 규칙이 적용되는 요소를 정의하는 CSS 규칙의 일부를 말한다.

CSS의 선택자와 중괄호

위 이미지에서 *과 p태그는 선택자가 된다. 참고로 *은 문서 전체에 css 코드를 적용할 때 쓰는 방식이다.