0713 CSS

SMALL

CSS : 웹 페이지의 시각적인 부분을 담당하는 프로그래밍 언어

css는 폴더를 만들고 파일을 별도로 만들어(Stylesheet) 링크 스타일로 연결

. class 이름 : Class를 지정 - class는 여러 군데에서 나올 수 있어요

CSS 주석 : /* */

* class selector *

.class이름

주어진 값을 class속성 값으로 가진 HTML요소를 찾아 선택(중복 가능)

.myStyle

* tag selector *

태그이름

HTML요소를 직접 지칭하는 간단한 선택자(띄어쓰기 x)

*id selector*

#태그이름

#아이디 - 같은 id는 한 군데서만 나와요(Unique)

#myId

HTML로 돌아와 CSS 파일과 연결합니다.

css와 링크 연결

css 파일을 링크할 때는 항상 속성 값을 stylesheet를 대입합니다.

연결할 주소를 지정

<a href=“URL”> </a> - inline emement

input type

<input type="text"> 한 줄의 텍스트 필드
<input type="date"> 날짜 컨트롤
<input type="range"> 숫자를 컨트롤
<input type="color"> 색 컨트롤
<input type="checkbox"> 체크박스

class, id 지정

<div class="myStyle">안녕하세요</div>

<p><span class="myStyle"> 안녕하세요</span></p>

<div id="myId">여기는 ID selector 사용되는부분입니다.</div>

<div> </div> 내용을 표현하기 위해 영역을 잡아요 -block level emement

웹사이트의 레이아웃(전체적인 틀)을 만들 때 주로 사용해요.

div class는 특정 요소를 대상으로 스타일을 적용하기 위한 것, 복수 사용 가능

div id 도 마찬가지로 특정 요소를 대상으로 스타일을 적용하기 위한 것, 유일한 요소에 스타일을 적용 - 단 하나

속성 값 style(스타일), width(가로 크기), height(세로 크기), border(테두리 굵기), background-color(배경 색상) , float(정렬), margin(여백)

직접 HTML과 CSS를 모두 coding 하는 건 너무 어려워요.

Bootstrap과 같은 Framework를 이용해서 쉽고 편하게 화면을 구성해 보아요!

LIST

대금부는개발자