CSS 기본

Web과 함께 시작하기

CSS 기본

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. 예를 들면, 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까? 제목과 같이 이 글은 CSS과 그 기능에 대한 기본적인 이해를 제공할 것입니다.

그래서 CSS가 뭔가요?

HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어도 아닙니다. 스타일 시트언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.

p {
    color : red;
}

1. styles 폴더에 style.css로 파일을 저장하세요.
2. style.css 파일에 위 코드를 적어주세요.
3. index.html 파일에 head의 안쪽에 아래 코드를 붙여 넣으세요

   <link href="styles/style.css" rel="stylesheet" type="text/css">
   

문단의 글자가 빨간색이라면 성공한 것입니다.

CSS 규칙(rule set) 해부

• 선택자(selector) : rule set의 맨 앞에 위치하여 HTML 요소(들)을 선택합니다.
• 속성(property) : 주어진 HTML 요소를 꾸밀 수 있는 방법입니다. CSS에서 rule 내에서 영향을 줄 속성을 선택합니다.
• 속성 값(property value) : 속성의 오른쪽의 콜론(:) 뒤에 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다.
• 선언(declaration) : 단일 규칙으로 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.

구문의 규칙

• 각각의 rule set은 반드시 {}로 감싸져야 합니다.
• 각각의 선언 안에 각 속성을 해당 값고 구분하기 위해 콜론(:)을 사용해야만 합니다.
• 각각의 rule set 안에 각 선언을 다음 선언과 구분하기 위해 세미콜론(;)을 사용해야만 합니다.

p {
    color: red;
    width: 500px;
    border: 1px solid black;
}

여러 요소 선택하기

요소의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할 수도 있습니다. 구분은 콤마(,)를 사용합니다.

p,li,h1 {
    color: red;
}

선태자의 여러 종류

선택자는 여러 종류가 있습니다. 위해서 우리는 요소 선택자만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다.

• 요소 선택자 : 특정 타입의 모든 HTML 요소
  구문 : p {}
• 아이디 선택자 : 특정 아이디를 가진 요소를 선택합니다. 아이디는 아이디당 페이지에서 하나의 요소에만 사용가능합니다.
  구문 : #id {}
• 클래스 선택자 : 특정 클래스를 가진 모든 요소를 선택합니다. 클래스는 페이지에서 여러번 나타날 수 있습니다.
  구문 : .class {}
• 속성 선택자 : 특정 속성을 갖는 페이지의 요소를 선택합니다.
  구문 : img[src] {}
• 가상 클래스 선택자 : 특정 요소의 특정 상태에만 선택합니다.
  a:hover {}

더 많은 선택자가 있습니다. 자세한 목록은 선택자 가이드에서 찾아보세요.

글꼴과 문자

지금까지 약간의 CSS 기본에 대해 살펴보았습니다. 우리의 예제가 멋있게 보이도록 style.css 파일에 더 많은 rule과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.

1. 웹폰트를 하나 선택해 보도록 합시다. 구글폰트에서 찾아도 좋고 눈누 사이트도 좋습니다.

   @font-face {
       font-family: 'Yeongdo-Rg';
       src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/Yeongdo-Rg.woff') format('woff');
       font-weight: normal;
       font-style: normal;
   }
   

2. 선택하면 폰트와 문자 크기를 설정해 보도록 합시다.

   
       html {
           font-family: 'Yeongdo-Rg';
           font-size: 10px;
       }
   

3. 다음으로 가운데 정렬(text-align: center;)하고 문자의 높이(line-height)와 자간(lettet-spacing)도 설정해 보도록 합시다.

박스의 모든 것

CSS 작성에서 여러분이 알아야 될 많은 것들은 박스에 관한 것입니다. 크기, 색상, 위치 등을 설정하는 것 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.

• padding : padding 속성은 컨텐츠 주위의 공간을 의미합니다.
• border : border 속성은 padding의 바깥쪽에 놓인 테두리를 의미합니다.
• margin : margin 속성은 요소의 바깥쪽을 둘러싼 공간을 의미합니다.

페이지 색 바꾸기

html {
    background-color: #00539F;
}

body 외부 정렬하기

body {
    width: 600px;
    margin: 0 auto;
    background-color: #FF9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
}

• width: 600px; 이것은 body가 항성 600px의 너비를 갖도록 강제합니다.
• margin: 0 auto; 이것은 위아래의 마진은 0으로 하고 auto로 왼쪽과 오른쪽의 여백을 갖도록 합니다.
• background-color: #FF9500; 이것은 배경색은 #FF9500으로 설정합니다.
• padding: 0 20px 20px 20px; 이것은 패딩값은 위:0, 오른쪽:20px, 아래:20px, 왼쪽:20px를 갖도록 합니다.
• border: 5px solid black; 이것은 테두리 두께:5px, 테두리 스타일:solid, 테두리색:검정색을 갖도록 합니다.

메인 페이지 제목 배치하고 꾸미기

h1 {
    margin: 0;
    padding: 20px 0;
    color: #00539F;
    text-shadow: 3px 3px 1px black;
}

여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 그것은 브라우저가 h1 요소에 어떤 초기 스타일링을 적용하기 때문에 발생합니다. margin: 0; 설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.

• text-shadow: 3px 3px 1px black; 이것은 그림자 수평이동:3px, 그림자 수직이동:3px, 그림자 흐림반경:1px, 그림자색:검정을 의미합니다.

이미지 가운데 정령

img {
    display: block;
    margin: 0 auto;
}

• display: block; 이것은 img에 margin: 0 auto;을 적용하기 위해 block level을 갖도록 하는 것입니다. 자세한 내용이 궁금하면 display에서 선행하여 보세요

---