티스토리 뷰
부산더조은직업전문학교. 4/26 ~ 7/29(약 삼 개월), Web main page
< 단축키 >
*모든 파일이름은 영어 , 숫자, _(언더바), -(하이픈)만
ㅇ ctrl + n 새파일
ㅇ ctrl + s 저장 (파일 상단메뉴에서 저장 X)
*파일 저장 시 반드시. html을 붙여야 함
ㅇ chrome 웹에서 새로고침 시 단축키 : F5 또는 ctrl R
ㅇ ctrl + / 코멘트((<!--코멘트--!>)를 소환하는 단축키
ㅇ ctrl + enter 줄바꿈
ㅇ ctrl+space 요소/속성? 불러내기
*lorem*2 누르고 tab 하면 dummy text
**ctrl alt shift 방향키 : 한꺼번에 선택
< VSCODE 단축키>
*alt+shift+위아래 방향키 : 위아래로 줄 복사 단축키
*alt+위아래: 줄이동 단축키
Ⅰ. HTML 언어
1. HTML 개념
: html은 웹사이트(앱)의 화면을 구성하는 가장 기본적인 마크업 언어입니다
- 문법 : 여는 태그(<h1>)와 닫는 태그(</h1>) 안에 내용을 넣는 것임
- 모든 html 태그(h1 h2 h3 등 )는 제각기 다른 의미 가진다!
(모양은 중요하지 않음, 모양은 얼마든지 css로 마음껏 바꿀 수 있음!)
그러므로 의미가 통하게 쓰는 것이 중요함
2. HTML 언어 태그
가. HTML 언어 태그 종류 및 특성
ㅇ h1: 페이지의 대제목 ex) Naver 홈페이지의 'Naver'
ㅇ h2: 부제목
ㅇ h3: 소제목 (단원, 섹션 제목...)
*h는 Headline
ㅇ p: 문단
*p는 Paragraph 문단
ㅇ br: 줄 바꿈
: html은 태그 내/외이든 enter, tab, space를를 입력해도 단 하나의 공백 문자(=space*1)만 입력되기 때문
<br> 태그는 닫는 태그가 없는 일종의 '키워드'
ㅇ img: 이미지 삽입
: <img> 태그는 닫는 태그가 없는 단일 태그
어디에 있는 무슨 이미지인지를 반드시 지정해 줘야 함
<img src="폴더명/파일명">
ㅇa 태그
<a href="링크" target="_blank"(새 탭으로 열기)> 대상:어떤 걸 선택해서 링크를 보여줄 건지 </a>
- 상대 경로(내 폴더 안) : 나의 지금 위치에서 어디 파일이 있는가? 파일의 위치가 달라지면 경로가 달라짐
ex) 상위 폴더 경로로 지정하는 경우경우../ 파일명. jpg
- 절대 경로(다른 곳): 이미 서버에 올라가 도메인이 지정된 경우
*대부분 상대경로가 많이 쓰임(개발자는 상대경로를 절대경로로 치환하여 사용함)
√ 헷갈리지 말기! 이미지 img 태그는 닫는 캐그가 없으나 a태그는 닫는 태그 </a>가 있음
ㅇlist
- ul - unorder list 비순차적 목록
li태그를 사용해서 각각의 항목을 입력합니다
순서가 중요하지 않은 항목들을 그냥 나열할때 씁니다!
+ ol - order list 순차적목록
순서가 중요한 항목들을 입력할때 사용
즉, 순서가 바뀌면 의미가 바뀌는 것들 ex) 실검
(그러나 대부분 ul 태그를 씀)
ㅇdiv: 하나의 영역 섹션 구획 나누는 용도 like '칸막이'
ㅇtable: tr(table row) 행 td 태그로 디렉토리 셀을 만들어 넣는 것
<table> 태그 안에
1. 행 <tr>을 먼저 만들고
2. 각각의 행에 셀 <td>을 넣는다!!
3. 만약 열끼리 틔우고 싶다면 왼쪽의 요소에게 colspan(column 열)을 주고,
행끼리 틔우고 싶다면 위쪽의 요소에게 rowspan을 준다
--웹 제작 시 사용 빈도 낮으나 2010년도 이전 테이블로 만들어진 경우 많음(수정 관리할 가능성)
*css 언어 전에는 html에게에게 바로 속성을 줬음
ex) <table border="1">.. 경계경계 구분 선
나. HTML 언어 태그 속성(src) 쓰기
: html 태그는 속성을 가질 수 있습니다! *src는 source
속성을 쓰는 방법? <태그 이름 속성 이름="속성 값">
3. 기본 HTML 문서문서 양식
(<! DOCTYPE html> HTML5 선언문)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
4. HTML의 블록요소/인라인요소
가. 블록 요소: 한번에 한칸씩 차지하는 요소 Elements ex) h1, h2, h3, p
나. 인라인 요소: 글자 내용물만큼만 존재하는 요소 ex) a, img, span
*기억하는 방법: a, img, span을을 제외한 대부분의 html요소는 블록입니다
참고)
<div>
<h1>
<a href="#">
<img src="images/logo.png">
</a>
</h1>
<ul>
<li><a href="#"> login </a></li>
<li><a href="#"> Join </a></li>
</ul>
</div>
*로고 그림을 넣더라도 h1 제목임을 명시해줘야함
*가로로 한 줄인 경우 가로 정렬이 되어있는 '리스트' ul
*웹에서 모든 메뉴는 다 이동하므로 a태그 href="#"쓰기
- [cssStart.html] file
Ⅱ. CSS
: css는 웹을 꾸미는 것 (Cascading style sheet)
- 꾸미는 속성과 정렬하는 속성 2가지 속성 있음.
1. <Style> 태그
: style 태그 안 쪽은 완전히 css 영역. 다른 (html과 같은) 언어들은 적용 안 됨.
(style을 열면 더이상 html 이 먹히지 않음. css 만의 공간 like 어디로든문)
- 규칙? css에서 하나의 속성에는 하나의 속성값만 적용 가능하다. 여러 개가 있으면 아래의 것이 적용된다.
가. 선택자
<style>
p{
color: red;
color: blue;
}
</style>
→ p는 (따로 색상을 지정하지 않은 경우 기본 색상이) 모두 파란색이 됨
나. class
: html 요소에게 이름을 주는 것. 특정 요소를 지정하여 속성(ex) color)을 줄 수 있음.
- 어떤 요소에 class로 이름을 부여하는 것에도 규칙이 있음.
☆ class 가 p 보다 선택자 우선순위를 가짐.
ㅇ class 이름 짓는 필수 규칙
1. 영어, 숫자만 가능
2. 특문은 _, - 만 가능
3. 대소문자 구분을 합니다
myLove / mylove 서로 다른 클래스
4. 띄어쓰기 금지
<p class="my love"> (X)
5. 숫자로 시작하면 안됨
ㅇ class 이름 짓는 권장 규칙
1. 의미가 통하는 이름으로 지어주세요
<h1 class="logo"></h1>
<div class="section"></div>
2. 대문자로 시작하지 말고, 대문자로 전부 쓰지도 마세요!
<div class="Love"> (X)
<div class="LOVE"> (X)
3. 띄어쓰기하고 싶을 때 쓰는 규칙을 통일해주세요
mylove라는 클래스이름을 짓고 싶을 때 셋 중 하나만 선택
myLove (O) 캐멀케이스
my_love (O) 스네이크케이스
my-love (O)
ex) 나는 띄어쓰기를 대문자(캐멀 케이스)로 통일해서 표시할 거야!
다. 선택자와 클래스
: style 태그에서 모든 선택자에 같은 속성을 줄 때는 이름 그대로 쓰기
(아래와 같이 'p'라고 써야 함!. p5 {}가. 아님. 앞에 점을 찍은. p는 클래스를 지정하게 됨)
<style>
p{
line-height: 50px;
}
</style>
→ 모든 p(문단)의 행간을 50px로 만듦
- [font1.html] file
라. css FONT 관련 속성
color: 글자색상 지정
font-size: 글자 크기, 단위 필수
font-weight: 글자 굵기, 굵게하기굵게 하기: bold
font-style: 글자 눕히기, italic을 주면 눕는다!
text-decoration: 글자에 줄넣기줄 넣기, underline/overline/line-through
(underline을 제일 많이 씀/line-through 취소선)
text-align: 글자 정렬하기, center/right/left/justify(양쪽)
*사용자가 모바일을 사용하든 컴퓨터를 사용하든 모든 환경에서 똑같은 web을 보여주기 위해 '중간 정렬'이 매우 중요함! 그 방법들 중 "글자 가운데 정렬"은 text align임.
line-height: 행간, 단위 줍시다!
letter-spacing:: 자간, 단위 줍시다!
+text-transform: uppercase 대문자 만들기
마. <span> 태그
: 글, 문단 등에서 하나의 특정 단어에만 속성을 주는 경우
span 은 아무런 의미 없이 구획을 나누는 태그. 주로 텍스트들을 감싸서 효과를 주는 용도로 많이 사용된다.
오답) <div> 태그가 아님. div를 쓰면 블록 요소가 따로 떨어지게 됨.
무궁화
삼천리 화려강산
과 같은 형태가 됨.
정답)
<head>
<style>
span {
color: red;
}
</style>
</head>
<body>
<p class="p5">
동해물과 백두산이 마르고 닳도록 <br>
하느님이 보우하사 우리나라 만세 <br>
<span> 무궁화 </span> 삼천리 화려강산 <br>
대한사람 대한으로 길이 보전하세
</p>
</body>
→ 애국가 문단에서 '무궁화' 단어만 red로 color 속성 주기
바. MARGIN의 개념
- [widthheight.html] file
- [margin.html] file
- [box.html] file
ㅇ width 너비 / height 높이
ㅇWhat is MARGIN?
: 외부 여백. 요소와 요소들 사이의 간격을 띄우기 위해 사용하는 것. 네 가지(top/bottom/left/right) 방향으로 줄 수 있다.
★ Bulid Up (책에 없는 중요한 개념! 이어지는 원리) ★
1. 모든 블록 요소는 처음 만들어졌을 때 항상 너비는 가득 차 있고 높이는 안에 들어있는 자식(컨텐츠)만큼 생성된다!
(가로나비는 한 줄을 다 차지하지만 세로 높이는 내가 쓰는 내용만큼 생성됨)
2. (블록 요소는 처음엔 항상 너비가 가득 차 있음) 특정 요소에 <style>로 인위적으로 너비(width)를 적용한 경우 나머지는 margin으로으로 처리가 된다! (비어있는 것이 아님)
→ 그러므로 margin을을 좌/우에 자동 분배하라는 의미로 좌/우(left/right) 자동(auto)으로 주는 경우 블록 요소가 가운데로 온다.
. box {
margin-left: auto;
margin-right: auto;
}
이렇게 쓰는 경우 box 요소가 웹 상에서 가운데로 옴
3. html 블록 요소는 처음 만들어졌을 때(즉, width를 가지지 않았을 때) 부모 요소를 가득 채운다!
<body>
<div class="box">
div class="thumb"></div>
→ box는 thumb의 부모이고 box의 부모는 body이다.
: 블록 요소(자식 요소)는 처음에는 자기를 둘러싸고 있는 것(부모 요소)을 가득 채우고 있음.
box와 thumb가 모두 width 값을 가지고 있다가 thumb의 width 값을 삭제하면 (화면을 가득 채울 만큼 너비가 가득 차는 것이 아니라) box의 너비만큼 늘어남
**[box.html] 작성 시 놓친 점
1. 개념) 까만 네모가 분홍 네모 안에 있는 그림에서 '까만 네모'는 '분홍 네모'에 포함되어 있다는 뜻.
→ 그러므로 위와 같이 box 안에 포함되는 요소들을 안에 모두 넣고 </div>로 닫아야 함.
(<div class="box"></div>가 아님)
2. 개념) <head>에서 <style>을 지정할 때 태그는 태그 이름을 써야 하고 클래스는 앞에.(온점) 찍어서 이름을 써야 함.
. box {
width: 300px;
height: 400px;
background-color: cyan;
margin-left: auto;
margin-right: auto;
}
h1 {font-size: 40px;
text-align: center;}
→ 태그 이름을 쓸 때는 앞에앞에. 을 쓰면 안 됨.
(. h {text-align: center;} 또는. p {text-align: center;}가가 아니라 h1 p이라고 쓰고 {} 열어야 함)
사. 가로 정렬(display:flex를 활용한)
*참고)
WWW 최초엔 박사논문 공유를 위해 만든 "문서 전용 네트워크"가로 정렬하는 방식이 세대별로 달라집니다
1세대 : 테이블을 만들어서 각각의 셀 안에 요소를 집어넣음
--------------------------------------
2세대 : float:left와와 clear fix hack을 사용한 가로정렬 방식
3세대 : display:flex / display:grid를 활용한 가로정렬방식가로 정렬 방식 display:flex (2017) flexible 한 웹을 쉽게 만들 수 있다유연한계가 있었다!!! : 이 flex를 지원하는 브라우저가 적었다적었다!!! 그런데 이제는 모든 브라우저에서 flex를 지원하고, IE 가 이제 사라지게 되면서 모두가 보편적으로 사용하는 가로정렬의 기본 기술이 되었습니다!!!
☆ 가로정렬을 할때는 무슨 속성을 쓰던 간에 반드시
1. 가로정렬할 아이템들끼리 반드시 하나의 부모로 묶어준다
2. 이때, (아이템 자식) 태그들을 묶어준 부모를 container라고 부릅니다.
3. 이때, 컨테이너 안의 태그들 (가로 정렬되는가로정렬되는 그 대상들) items라고 부릅니다
ㅇ display:flex로 가로 정렬하기
1. 하나의 container 안에 가로 정렬시킬 items들을 집어넣는다
2. container에게 display:flex를 준다
이때, 선택자 여러개 한꺼번에 선택하는 방법?
ㅇ 속성 다 같이/따로 주기
1. , 콤마를 찍으면 여러 개의 속성을 동시에 줄 수 있음 여러 선택자를 한 번에 처리함
ex). con1,. con2 {
margin-top
}
쓰면 item 간격 상하좌우 여백 생김
완전히 공통된 속성을 가진 두개의 선택자들을 하나로 묶어서 쓸 수 있습니다
이 경우 , (콤마)로 구분해서 쓰며 콤마 뒤에 스페이스써서 한칸 띄워주셔도 됩니다
*선택자를 다양하게 쓸 수 있어야 함. 즉 같은 것을 묶어주는 것이 중요
2. 속성 따로 주기
con2의 아이템에게만 속성을 주는 경우 따로 지정
con2안에 들어있는 아이템이라는 뜻
ex). con2. item {}
ㅇ 마지막 요소 선택하기
. box:last-child {}
. box라는 이름을 가진 선택자들 중 마지막 자식에 해당하는 요소를 선택합니다
이때,. box :last-child 혹은. box: last-child의 형태로 스페이스를 사용해서는 안됩니다
. box:last-child {
margin-right: 0;
}
→. box들 중에서 마지막 자식에 해당하는 것 margin-right 떼기
☆ display:flex는 container는 자기 안의 아이템들을 구겨서라도 다 넣으려고 함
즉. display:flex에서는 아이템 자식의 사이즈가 컨테이너 부모보다 크더라도 밑으로 자식이 삐져나오지 않음
*display:flex에서는 누구에게 무엇을 주는지 중요함
*통으로 띄워야 하는 경우 item보다 container에게 margin 주는 것이 좋음
*display:flex 기본 가로 정렬 x가 메인 축임
ㅇ justify-content?
메인 축 내에서의 아이템 정렬
옵션 1 space-between
사이사이에 아이템을 넣는 것. 남은 여백을 아이템들 사이에 자동 분배
(하나하나에 margin을 줄 필요가 없음)
옵션 2 center---나중
아이템을 가운데에 놓게 됨
그 이후 아이템에게 마진 레프트 라이트를 주면 라스트 차일드 쓸 필요 없음
추후 중요한 개념))
☆ display:flex 가 없으면 justify-content는 작동하지 않는다!!!
justify-content는 display:flex의 수많은 옵션 중 하나이기 때문
flex-container에게 주는 속성(item에게 주는 속성이 아님!)