HTML / CSS 장점
다른 언어(자바스크립트, 파이썬, 루비 완전히 다른 언어)와도 잘 섞여, 표현하고자 하는 내용 대신 표현
가장 큰 장점 : 누구나, 언제든 접속할 수 있는 웹= 강력한 접근성
프로그래밍을 배우는 것은 영어를 배우는 것과 같다.
현실에서 사용가능한 프로젝트 !
프로젝트 개발과 완성 따라가며 필요한 것 채우는 수업 방식
웹 - 워드처럼 문서제작과 같다. 다만, 다른 언어와 연결되지 않기에 html, css이용이 유리하다.
나만의 이력서
각 컨텐츠
<가방1>내용물입니다.</가방1>
마치 진짜 가방에 내용 넣듯 , 순서 지켜주기
<가방2><가방1>내용물입니다.</가방1></가방2>
태그 : 글 묶어주기
: heading(머리) 1 가장 큰 제목 태그
*이 문서는 html문서다 (기본) index.html
<!DOCTYPE html>
<HTML></HTML>
크롬과 같은 최신 브라우저는 없어도 가능
*부가정보:문서에 대한 정보 나타내는 것. 여행 가방의 수화물 태그 같은 존재
<head>
<meta charset= "UTF-8"> #한글 정상적 출력위해 필수
<title> good 이력서</title> # title 내용 적을 것!
<link rel="sylesheet" href="best.css"> #두 파일(html,css) 연결 단독 태그 link
</head>
*컨텐츠 정보
<body>
<h1>제목</h1>
<p class="big-font"> one</p> (문단)
<p class="small-font"> two </p>
<footer> (화면바닥 안내문)
고객센터 , 저작권 명시, 사업자 등록번호
copyright CODE GOOD . All rights reserved.
</footer>
</body> *CSS 화면 적절한 위치에 표시 best.css파일
html과 css분리할 것 ( 읽는데 깔끔하게 )
p{
text-align: center;
color : orange;
font-size: 30px; # px: picture element
}
big font :이런 tag 꾸며줘라 -> .big-font : 클래스 꾸며줘라
.big-font{
font-size: 40px;
}
.small-font{
font-size:15px;}
footer {
text-align: center;
background-color: black;
color: white; #글자 색 화이트#919191 검정#121212 or #ebebeb
}
.mainbox {
(html css border)
border: 두께 방식 색깔;
border: 5px solid black;
width: 610px;
height: 600px;
text-align : center; # 박스 내용만
margin-left:auto;
margin-right:auto; # 가운데 정렬 (구글 크롬과 여러가지 브라우저 표준달라지며 가운데 맞추기 어렵기에, left, right 조정)
padding : 30px; #(테두리와 내용 사이의 빈틈 -보통 알아차리기 어렵게 얇게 선정, padding도 커질수록 박스 크기 커짐)
#margin : 30px; (왼쪽만 30px)
} GOOGLE >
html color code 치면 여러 색 값 나옴
http://webberstudy.com/html-css/css-1/border/
박스 쪼개기
꾸미기 쉽게 하기 위한 상자!
박스 그림자 표현하기.
.mainbox{
box-shadow 0px 1px 20px 0 rgba(0,0,0,0.1);
box-shadow 0 1px 20px 0 rgba(255,192,203,1);
1. 가로축 그림자 +면 오른쪽으로, -면 왼쪽으로 그림자
2. 세로축 그림자 +면 위, -면 아래
3. 블러값
4. 퍼짐 정도(spread) 클수록 퍼짐 넓어짐
5.그림자 색 rgb (red, green, blue 0~255 가장 밝은게 255 ) 0.1 투명도 (10%) 0~1까지 입력가능
}
구글 웹 폰트 사용하기
구글에 올려져있는 구글폰트 가져다 씀
@import url('') 몬세라트 폰트 가져다씀 html css에 불러오면 됨.
@import url(https://fonts.google.com/share?selection.family=Do%20Hyeon);
*{
font-family: 'Do Hyeon', sans-serif;;
}- (의미) 문서 전체 적용
브라우저마다 다를 수 있기에 초기화 작업 필요
body, h1,h2{
margin:0px;
padding: 0px;
}
<section> #html 꾸미기 위해, 묶어주는 역할만 한다.
<h2>ABOUT ME</h2>
<p class="about-text"></p>
</section>section = div = article 다 같은 역할. 적절히 섞어쓰면 잘 보이게 코드 가능.
포장지 여러개 쓴것
의미없는 텍스트 쓰고, 나중에 수정하는 작업방식 많이함 =loremipsum
줄간 간격 넓히는 것
line-height: 16px;폰트 160%정도 제일 보기 좋다고 함
float 쓰면 양쪽 각각에 한줄로 글 쓰기 가능.
float사용하면 한 줄에 좌, 우로 정렬 가능하다
그 다음 다른 줄 쓰기 위해서는 가두리 작업 필요.
.box{overflow: hidden}
.text1{float : left;}
.text2{float : right;}(한번에 묶어주기. ->다른 요소와 겹치지 않게된다.)
