HTML & CSS 공부 정리 4일차(21.03.16)

CSS(Cascading sytle sheet)

css에 html 추가하기

1. html과 css를 같은 파일에 적기

2. html과 css를 다른 파일에 적기(Recommended)

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

다른 파일에 적고 이어줄 때는 위 코드를 통해서.

문법

selector(point) {properties(속성): value;}

h1 {
    color: blue;
    font-size: 20px;
    text-align: center;
    font-style: italic;
 }
 #first {
        background-color: blueviolet;
}

• 굉장히 많은 property가 있기 때문에 연습이 필요하다.
• 위에서 아래로 적용된다. 따라서 만약 css에 같은 태그를 지칭하는 두개의 상반되는 내용이 있는 경우 밑에 있는 것이 적용된다.
• id를 지칭할 때는 #를 사용한다
• css 적용할때 같은 tag를 구분하지 않고 모두 지칭하면 모두 같은 style 적용
• 다른 css를 적용시키기 위해서는 id를 설정하고 값을 따로 할당하는 방법이 있다.
• 위의 경우 공통된 tag에 더불어 id를 적용한다

Box

기본적인 구성요소.(div등)

• 여러 박스는 같은 줄에 오지 않는다.(같은 줄에 오지 못하는 것을 통칭해서 Block이라 한다.)

Inline

같은 줄에 올 수 있는 것(span등)

• 링크, 이미지, 텍스트 등 있지만 많지 않음
• 높이와 너비가 없음

Block

• 높이와 너비가 있다
• 같은 줄에 여러개가 오지 못한다

Changing block and inline

display property를 통해서 가능.
Block를 inline으로 바꾸면 높이와 너비가 없어져 사라진다.

margin, border, padding

box의 세 요소

margin

box의 경계(border)부터 바깥의 공간

            div {
                height: 100px;
                width: 150px;
                background-color: whitesmoke;
                margin: 20px 15px;
                margin: 20px 5px 10px 15px;
            }

margin-left 이런식으로 일일이 지정할 수도 있지만 위와 같이 하는 것이 편하다.
값 2개인 경우 : top-bottom, left-right
값 4개인 경우 : top, right, bottom, left

collapsing margin

바깥의 박스와 안의 박스의 border이 같으면 margin을 같게 취급(top-bottom에만 적용)

padding

margin의 반대 개념. box의 경계로부터 안쪽의 공간
margin과 마찬가지로 한번에 지정 가능