HTML
태그
<!DOCTYPE html>, <html> </html>은 디폴트로 쓰기head
부가정보
body
컨텐츠 내용
meta charset = "utf-8
한글이 써지는 코드
title
head안에 넣는 제목
footer
화면 하단에 쓰는 문장을 뜻함, 그냥 사용하면
와 다를바가 없어서 css로 차별화를 해야 함
link
css와 html을 이어주는 역할
ex) <link rel = "stylesheet" href = "codelion.css">
class 지정
ex) <p class = "big-font"></p>section과 div, article의 차이
section은 논리적인 부분에 사용
div는 의미없는 부분을 블럭하고 싶을 때 사용
article은 공지사항, FAQ, 고객센터 같은 게시판 영역에 사용
이미지 넣기
<img src = “images/fackbook.png”>하이퍼 링크 넣기
<a href = “url명”>CSS
중앙정렬
text-align : center;
배경색 설정
background-color : black;
글자색 설정
color : white;
글자크기 설정
font-size : 30px;
글자 두께 설정
font-weight : bold;
클래스 전체 꾸미기
ex) .big-font{} // big-font 클래스 꾸미기
CSS설정들은 클래스 전체 꾸미기가 우선순위, 클래스 내부에 있는 꾸미기가 그 다음이다.
박스꾸미기
border : 두께 테두리 색깔 ex) border : 5px solid black;
width : 610px // 가로 설정
height : 300px // 세로 설정
박스 가운데 정렬
margin-left : auto;
margin-right : auto;
두 코드를 쓰면 가운데 정렬 된다.
박스 외부 영역부터 4가지로 나뉜다.
margin border padding content 순으로 나뉨
padding
박스 안쪽과 글씨 사이
margin
주변 요소와 거리를 두게 함
박스에 그림자를 넣기
box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1)
1번요소 가로축, 2번 요소 세로축, 3번요소 블러 값 4번요소 퍼짐정도 5번요소 그림자의 색 rgba의 마지막 0.1 은 투명도를 나타냄
border
top , bottom, right, left를 통해 나오는 위치 지정이 가능하다. 설정안하면 4위치 전부 나옴
줄간 간격 넓히기
line-height : 16px
한 줄에 두개의 문장 좌 우에 쓰기
두개의 CSS에 float: left; / float:right; 하나씩 지정 다른 요소와 겹치지 않게 하려면 두개의 요소만 따로 묶어서 CSS에 속성을 만들고 overflow : hidden;을 추가하면 됨
들여 쓰기
padding-left
padding도 left, right, top, bottom 설정이 가능
