스타일 언어, CSS 알아보기 1

CSS(Cascading Style Sheets)에 대해 알아보았습니다.

CSS는 웹페이지의 디자인과 배치를 조정하여 웹페이지를 보기 좋고 사용하기 편하게 만드는 스타일 언어입니다.

CSS를 구성하는 것으로는 선택자와 속성, 값이 있습니다.

선택자는 CSS를 적용할 대상을 고르는 표현이고, 속성은 바꾸고 싶은 항목, 값은 어떻게 바꿀 것인지에 대한 설정입니다.

 

자주 쓰이는 선택자로는 class 선택자와 id 선택자가 있는데,

class 선택자는 같은 내용으로 한 번에 묶어서 설정 할 때 사용하고, id는 유일성을 보장하기 위해 사용됩니다.

 

자주 쓰이는 속성은 아래와 같습니다.

• color: 텍스트 색상 지정
• background-color: 배경색 지정
• font-family: 글꼴 지정
• font-size: 글자 크기 지정
• margin, padding: 요소 주위의 여백 및 안쪽 여백 지정
• border: 테두리 지정
• width, height: 요소의 너비와 높이 지정
• display: 요소의 표시 방식 지정 (예: block, inline, flex 등

 

미션에 앞서

<link rel="stylesheet" href="styles.css" /> 이 갖는 의미는 문서외부에 있는 css파일을 연결하겠다는 것으로

styles.css라는 스타일 파일을 불러와서 적용하겠다는 뜻입니다.

<link ... /> 는 외부 파일을 HTML 문서와 연결하는 태그이고

rel="stylesheet"는 연결할 파일이 스타일시트, 즉 CSS파일이라는 뜻입니다.

href=:styles.css"는 불러올 파일의 위치 또는 이름입니다.

 

외부 스타일 파일을 연결하겠다고 파일을 새로 작성하였는데,

적용이 되지 않아 무슨 일인지 알아본 결과

파일 이름을 styles.css가 아닌 styel.css로 만들어버렸다는 걸 뒤늦게 알았습니다..

그래도 찾아내서 다행입니다 ㅋㅋ

갈수록 미션을 하는 데에 시간이 오래 걸리는 것이 느껴지네요 화이팅,, :)