모스카토

CSS 시작 본문

프런트엔드

CSS 시작

라리라밤 2020. 9. 1. 21:32

css (Cascading Style Sheets)  =  css 코드의 위에서 아래 순으로 html의 style을 정의한다.

* css 문법 *

셀렉터 {

프로퍼티1 : 값1;

프로퍼티2 : 값2;

}

셀렉터에는 html의 태그명, 태그의 id, 태그의 class, 태그의 어트리뷰트 등을 쓴다.

말그대로 어떤 요소에 style을 적용할지 지정하는 역할을 한다.

여러개의 셀렉터를 콤마로 구분해서 사용할 수 있다.

중괄호를 열고, 프로퍼티는 여러 개를 사용할 수 있다.

반드시 세미콜론 ( ; )으로 닫아줘야 한다.

 

html에 css를 적용하는 방법

body
결과

위 상태에 css를 적용한다.

1. inline css : <head> 부분에 <style> 태그 사용

inline css

<head> 태그 안에 <style> 태그를 사용하고, 각 요소에 배경색 (background-color)를 줬다.

위 코드의 결과

위와 같이 배경색깔이 각 지정한 요소에 따라 적용된다. 

css를 연습할 때나 적용할 css가 별로 없을 때는 이 방법을 사용한다.

2. embedding css : <body> 부분에서 직접 적용

embedding css

각 요소에 직접 적용할 때는 style 어트리뷰트를 사용하고 큰 따옴표 안에 css 를 쓴다.

위 코드의 결과

첫번째 줄의 폰트 크기가 커진 것을 확인할 수 있다.

두번째 줄은 배경색이 orange로 바꼈다.

태그에 바로 쓰는 css가 가장 마지막에 적용되기 때문이다.

각 태그 혹은 요소에 우선 적용할 수 있지만, html 코드가 복잡해지므로 잘 사용하지는 않는다.

3. externel css : <head> 부분에서 <link> 태그 사용

.css 파일을 따로 만들고 주소(경로)로 연결한다. 

externel css

어트리뷰트 rel 에 stylesheet라고 줘야 한다.

href 어트리뷰트에 .css 파일이 있는 경로를 준다.

test.css 파일의 코드

각 태그의 배경색을 모두 빨간색으로 주고, 글자를 italic체로 기울어지게 설정했다.

위 코드의 결과

다 적용됐지만 Hello World! 의 배경색은 여전히 주황색이다.

embedding css 가 가장 직접적으로 적용됐기 때문이다.

 * 위 방법 중 어떤 방법으로 하든 가장 마지막에 있는 css가 적용된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h3 {
        background-color: skyblue;
      }
      p {
        background-color: violet;
      }
      div {
        background-color: yellow;
      }
    </style>
    <link rel="stylesheet" href="test.css" />
  </head>
  <body>
    <h3 style="font-size: 30px;">
      This is a header
    </h3>
    <p style="background-color: orange;">
      Hello World!
    </p>
    <div>
      Welcome to html!
    </div>
  </body>
</html>

 

박스

태그는 박스형태이다.

box = margin + border + padding + content

margin : 박스의 border 바깥에 있는 공간

border : 박스의 테두리, 경계로 block, inline 모두에 존재한다.

padding : 박스의 border 안쪽, 내용 바깥에 있는 공간

body에 margin, padding 적용

body 태그에 margin과 padding을 똑같이 50px로 줬다,

위 코드의 결과

하늘색 박스와 노란색 배경 사이의 공간이 margin, 하늘색 박스와 파란색 박스 사이의 공간이 padding이다.

border 에 줄 수 있는 style

bordrer : 두께, 모양, 색깔 순서로 한번에 값을 준다.

border-style : 모양

border-color: 색깔

border-radius : 모서리 둥글게하는 정도, 원의 반지름을 크기로 준다.

border style
border-radius를 줌

저작자표시 (새창열림)

'프런트엔드' 카테고리의 다른 글

[css] flex  (0) 2020.09.03
[css ] block v.s inline  (0) 2020.09.02
[html] form 태그  (0) 2020.08.21
[html ] 태그  (0) 2020.08.21
html css 시작  (0) 2020.08.19
'프런트엔드' Related Articles more
Comments