스타일 언어 css 배우기
css를 html 페이지에 추가하는 두가지 방법
- 같은 html 파일에 html코드와 css코드를 놓는 방법
: head 파트에 < style > 태그를 사용해서 그 사이에 css 코드 입력하기
- 같은 html 파일에 html코드와 css코드를 놓는 방법
<sytle></style>- css와 html을 분리하는 방법(추천)
: css 파일(styles.css)을 만들어서 link 태그로 파일 연결하기(link 태그를 열고 href로 styles.css 값 주고 rel 속성으로 css 파일과 html 도큐먼트의 관계인 stylesheet 명시)
- css와 html을 분리하는 방법(추천)
<link herf="styles.css" rel="stylesheet">: 따로 분리해서 만들면 여러 html 파일에 적용할 수 있어서 좋음
css 코드 작성 세가지 규칙
- html 코드를 가리키는 것을 selector 이라고 함. 그리고 selector의 텍스트 크기, 폰트 종류, 색상 등을 속성이라고 하는데 이것들을 {중괄호}를 사용해서 묶음.
- selector을 사용해서 html의 어떤 태그를 가리킴
- 중괄호 열고 속성 적기
- 값 쓰기
#html 태그 중에 h1 태그에 css 적용하기
1. 먼저 태그 이름이랑 동일하게 selector인 h1을 적고
2. 중괄호 열고
3. 속성 이름과 : 을 쓴 다음 Value를 줌
4. 그리고 세미콜론;으로 닫아주면 한 줄 작성 완료
- color, font-size(속성이름에는 띄어쓰기, _ , / 사용X), text-decoration
: 속성에 맞는 값 써주기
CSS는 Cascading Style Sheets.
이때 C가 의미하는 cascading은 폭포같은, 계속되는, 연속되는 이라는 의미.
브라우저가 CSS코드를 읽을 때 위에 있는 코드부터 차례차례로 읽힘.
즉, 마지막에 있는 코드가 가장 마지막에 적용됨.
-> 코드의 순서가 결과에 영향 미침
어떤 웹사이트든 거의 모든 요소들이 box로 이루어져 있음.
p,header, address와 같은 "block(box)"를 만들면 그 옆에 다른 요소가 올 수 없음.
span이나 link와 같은 "inline"은 바로 옆에 다른 요소들이 올 수 있음(가로로 쭉 적어짐)
div는 box고 span, link(a), code는 박스가 아님
옆에 다른 요소 못 오는거 = block
다른 요소 올 수 있는 거 = inline(in the same line)
inline에는 아주 작은 글이나 링크, 그림 등등이 속함. inline에 해당하는 것들은 많이 없음.
따라서 block이 아닌 inline 종류를 기억하는게 훨씬 편함. ex) span, a, img
block을 inline으로 바꾸고 inline을 block으로 바꾸는 것이 가능한데, 그렇게 하는 것을 'display'속성이라고 한다.
기본적으로 span의 display 속성은 inline인데 이걸 display:block 으로 설정하면 block으로 변경됨.
다음으로 만들어둔 div의 display:lnline으로 속성을 inline으로 변경하면 div가 사라짐(div에 아무 컨텐츠도 없을 때).
Why? inline 요소는 높이와 너비를 가질 수 없음. block은 높이와 너비가 있음.
브라우저가 자동으로 적용하는 디자인 요소들이 많음.
Block이 가지는 중요한 세 가지 요소
1. margin: box의 경계 바깥에 있는 공간
- 브라우저는 자동으로 8px만큼 margin을 주는게 디폴트값으로 설정돼있음.
- margin 값을 0으로 주면 공간이 없어짐
- margin-left, bottom, right 등 사방으로 다 값 줄 수 있음
- padding
- border
-
인자의 개수에 따른 margin의 적용범위
1 value: 상하좌우
2 value: 수직(상/하), 수평(좌/우)
4 value: 상 우 하 좌 (시계방향) -
collapsing margin(마진상쇄)
두 box의 border가 겹칠때 일어난다.
수직으로만 발생한다.
=> padding 속성을 사용하여 해결할 수 있다.
<!DOCTYPE html>
<html land="kr">
<head>
<title>The Woohyun Times</title>
<!--<link href="style.css" rel="stylesheet" /> -->
<!--external CSS-->
<style>
/*inline CSS*/
html {
background-color: tomato;
}
body {
background-color: beige;
margin: 30px 50px 30px 50px;
}
h1 {
font-size: 50px;
color: yellowgreen;
}
div {
margin: 50px 30px 50px 30px;
height: 150px;
width: 150px;
background-color: whitesmoke;
}
span {
background-color: aquamarine;
}
a {
background-color: blueviolet;
}
p {
background-color: blue;
}
/*margin : box의 border(경계)의 바깥에 있는 공간*/
/**/
</style>
</head>
<body>
<div></div>
</body>
</html>