• 웹페이지 만들때 모든 요소는 태그 안에 넣는다.
• 일부 태그는 속성 기입가능
• 태그 안에 태그도 가능
• HTML style=” “ (font-size: 16px, font-family: , color: 등등)
• P태그 안에 span태그 를 통해 글자 일부를 스타일링 하는데 사용가능

Css 파일

0. CSS를 사용하시려면 CSS파일을 만든 후 HTML에 첨부해야합니다.

우선 작업폴더에 .css로 끝나는 파일 아무거나 하나 만드시고

HTML 파일로 돌아와서

 <link href="님들의css파일경로~~" rel="stylesheet">

href라는 속성에 여러분의 .css 파일 경로를 지정해놓으면 css 파일 이용가능합니다.

저는 css 폴더 안에 main.css 파일을 만들었기 때문에

css/main.css 이렇게 경로를 적었습니다.

"현재 html파일과 같은 경로에 있는 css 폴더 내부의 main.css 파일을 첨부하라"는 뜻

1. CSS파일에 스타일을 집어넣고 .어쩌구 작명해줍니다

.profile {
  width : 200px;
  display : block;
  margin : auto;
}

스타일을 적고 .어쩌구 이렇게 아무렇게나 작명하고 { } 중괄호로 묶어줍니다.

위의 코드는 3줄의 스타일을 .profile 이렇게 하나의 단어로 묶은겁니다.

그 단어를 클래스라고 부릅니다.

2. HTML에 클래스 명을 첨부해서 스타일을 넣을 수 있습니다.

<img src="lion.png" class="profile">

class 속성을 열고 클래스명을 집어넣으면

css 파일에서 묶어놨던 스타일들이 다 적용됩니다.

class 말고 다른 식으로도 스타일을 묶을 수 있는데

.profile { font-size : 20px }/*클래스*/#special { font-size : 30px }/*아이디*/p { font-size : 16px }/*태그*/

CSS selector 라고 칭하는 것들입니다.

클래스 selector는 .클래스명{ } 이렇게 적을 수 있고 모든 class="클래스명"을 가진 요소에 스타일을 적용가능합니다.

아이디 selector는 #아이디명 { } 이렇게 적을 수 있고 모든 id="아이디명" 속성을 가진 요소에 스타일을 적용가능합니다.

태그 selector는 p { 스타일~~ } 이렇게 적을 수 있고 모든

태그에 스타일을 적용가능합니다.

점과 샵 기호를 잘 외워두도록 합시다.

셀렉터의 우선순위

물론 class, id를 동시에 가지는 html 요소라면

스타일이 겹칠 수 있습니다. 그럴 경우 우선순위가 존재합니다.

style="" (1000점)

#id (100점)

.class (10점)

p (1점)

높은 점수순으로 우선순위를 가짐

웹레이아웃의 기초 : div를 이용한 네모네모 박스 디자인

네모 박스 디자인에 많이 사용하는 CSS 속성

.box {
  margin : 20px;
  padding : 30px;
  border : 1px solid black;
  border-radius : 5px;
}

margin은 바깥 여백,

padding은 안쪽 여백,

border는 테두리 (차례로 두께, 선의 종류, 색상),

border-radius는 테두리 둥글게 처리입니다.

가운데 정렬도 많이 하는데 저번 이미지처럼 display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다.

margin과 padding을 원하는 방향에만 줄 수 있습니다.

.box {
  margin-top : 20px;
  padding-left : 30px;
}

top, left, bottom, right 중 원하는 곳에만 여백을 줄 수 있습니다.

(참고) margin은 음수도 가능합니다. -20px 이런 식입니다.

(참고) margin : 5px 6px 7px 8px; 이렇게 띄어쓰기를 이용해 작성하시면

차례로 상 우 하 좌 마진을 5,6,7,8px 한번에 줄 수 있습니다.

display : block이 내장되어있는 div박스

.box {
  display : block;
}

모든 div, p, h1, li 등은 display : block 속성을 주지 않아도 기본적으로 내장되어있습니다.

그래서 p태그나 div태그를 그냥 사용하면 한 행을 전부 차지하게 됩니다.

이게 싫다면 display 속성을 다른 것으로 부여해주면 됩니다.

display : inline, inline-block, flex 등 여러가지가 있습니다.

일부 스타일은 inherit 됩니다

font-size, color, font-family, text-align 이런 속성들은

부모 태그에 쥐어주면 거기 안에 있던 태그들까지 전부 상속됩니다.

영어로 inherit 된다고합니다.

안에 글자들이나 태그들이 많을 경우 전부 font-size를 작성안해도

부모태그에 한번에 작성하고 끝낼 수 있으니 편리합니다.

다 inherit되는건 아니고 글자와 관련된 스타일들이 주로 inherit 됩니다.

레이아웃 만들기 1 : 호환성 좋은 float

사이트 레이아웃 디자인의 제 1원칙 : 만들고 싶은 레이아웃 디자인을 네모박스로 쪼개보고 그대로

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

.left-box {
  width : 100px;
  height : 100px;
  float : left;
}
.right-box {
  width : 100px;
  height : 100px;
  float : left;
}

<div>
  <div class="left-box"></div>
  <div class="right-box"></div>
  <div class="footer"></div>
</div>

.footer {
  clear : both
}

.box {
  width : 80%
}

<div>
  <div class="left-box"></div><div class="right-box"></div>
</div>

.left-box {
  width : 100px;
  height : 100px;
  display : inline-block;
}
.right-box {
  width : 100px;
  height : 100px;
  display : inline-block;
}

<div>
   <div class="left-box"></div><!--
--><div class="right-box"></div>
</div>

<div style="font-size : 0px;">
    <div class="left-box"></div>
    <div class="right-box"></div>
</div>

.box {
  margin : 10px auto 30px auto;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>