CSS 내용 분해하기, CSS 파일추가

CSS

CSS 내용 분해하기, CSS 파일추가

프도의길 2021. 9. 19. 23:14

CSS 내용 분해하기
CSS의 문법 구성은 다음 그림에 잘 나타나 있습니다.

셀렉터는 태그이름이나 id, 또는 클래스를 선택합니다. 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성합니다. 요소에 적용할 수 있는 내용을 속성이라고 합니다. 색상, 글자크기 등 다양한 속성이 있습니다. 속성에 적용할 적절한 값을 입력하여 스타일을 표현합니다. 그림에 나타나있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링합니다. 속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분합니다. 하나의 속성만 존재할 때에는 세미콜론을 붙이지 않아도 무방하지만, 속성과 값을 작성한 다음 세미콜론을 적는 습관을 들이는 것이 좋습니다.

CSS 파일 추가
여러분은 위에서 HTML 파일과 CSS 파일을 작성했습니다. 이번에는 CSS 파일에 작성된 내용을 HTML 파일에 적용하는 방법을 학습합니다. 코드펜에서 확인할 수 있었던 것처럼, 이미 두 파일은 연결되어 있습니다. CSS 파일을 HTML 파일과 연결하는 부분은 index.html 파일의 6번째 줄에 있습니다. CSS 파일을 HTML 파일에 연결할 떄에는, link 태그 안에서 href 속성을 통해 파일을 연결합니다.

link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용합니다. link 태그의 rel은 연결하고자하는 파일의 역할이나 특징을 나타냅니다. CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가합니다. href속성에는 파일의 위치를 추가해야 합니다. 지금 작성한 두 파일은 한 폴더 내에 있으므로 파일이름만 입력합니다. 다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있습니다.

똑같은 구조에 다른 스타일을 적용하면, 완전히 다른 스타일로 탈바꿈할 수 있습니다. 새로운 CSS 파일을 layout.css이라는 이름으로 만들고, 다음의 내용을 붙여 넣습니다. 그리고 이 CSS 파일을 연결하기 위해 새로운 <link> 태그를 추가합니다. layout.css파일은 index.css파일과는 달리 HTML 태그를 배치하는 역할을 합니다. 이 파일에서 나타나는 flex와 같은 다양한 속성은 레이아웃을 학습할 때 좀 더 자세히 살펴봅니다.

//index.html 파일에 새로운 link 태그를 추가합니다.