•
프로그램 코드 : 컴퓨터 프로그램을 프로그래밍 언어로 작성한 글
•
프로그래밍 : 코드를 작성하는 행위
•
프로그래밍 언어 : 컴퓨터에 명령 내리기 위한 언어 ( HTML, CSS는 해당 X )
HTML<구조> / CSS<스타일> / JavaScript<동작>
•
HTML ( Hyper Text Markup Language )
◦
Hyper Text → 링크를 통해 다른 문서로 접근할 수 있는 텍스트 (다중연결)
◦
Markup Language → 태그(마크, 표시)를 이용하여 문서나 데이터의 구조를 명시하는 언어
→ 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어
•
CSS ( Cascading Style Sheets )
◦
Style Sheets → 웹 페이지의 스타일과 관련된 모든 것을 정해둠
◦
Cascading → 폭포가 떨어지는 것처럼 우선순위대로 흘러가는 것
→ 웹 페이지에 관한 다양한 스타일들을 정의
•
JavaScript (HTML, CSS와 달리 유일한 프로그래밍 언어)
→ 웹을 이용하는 유저와 상호작용 하기 위한 기능을 추가할 때 쓰는 언어
HTML
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8">
<title>수노를 소개합니다.</title>
</head>
<body>
<h1>안녕하세요 저는 수노입니다!</h1>
<p>저는 현재 웹 프로그래밍을 공부하는 학생입니다.</p>
</body>
</html>
HTML
복사
•
<!DOCTYPE html> : 문서 형식을 정의
•
<html lang="kr> : 본격적인 태그의 시작, 사용하는 주 언어를 정의
•
<head></head> : html 문서의 정보를 담고있어 웹사이트에서 볼 수 없다. 단 하나만 존재. <html> 태그 바로 밑 위치.
◦
<meta charset="utf-8"> : 문서와 관련된 정보를 담음
◦
<title> : 웹 페이지의 제목을 담음
•
<body></body> : 웹사이트에서 보일 내용들을 담음. <head>와 마찬가지로 하나만 존재. <head> 태그 바로 밑 위치.
•
시맨틱 태그(Semantic tag) : 의미를 가지고 있는 태그
◦
<header> : 웹 페이지 혹은 <section>의 소개나 제목을 담기 위해 사용하는 요소
◦
<nav> : 네비게이션 역할을 하는 요소
◦
<section> : 기준에 따라 구획을 구분하기 위해 사용하는 요소
◦
<article> : 주내용을 담기 위해 사용하는 요소
◦
<aside> : 광고나 사이트의 주변 부분에 해당하는 내용을 담기 위해 사용하는 요소
◦
<footer> : 웹 사이트의 가장 아래에 들어가는 회사 정보 등의 추가 정보를 담기 위해 사용하는 요소
•
제목 태그 : <h?></h?> (중요도에 따라 1~6)
<h1> > <h2> > <h3> > <h4> > <h5> > <h6>
•
본문 태그
◦
<p></p> → 단락
◦
<pre></pre> → <p>와 달리 입력한 그대로 출력
◦
<br> → 띄어쓰기
•
글자와 관련된 태그
◦
<strong></strong> → 글씨 굵게 (bold체)
◦
<em></em> → 글씨 기울이기 (Italic체)
◦
<sub></sub> → 아래에 기입 ex) 로그의 밑 표현
◦
<sup></sup> → 위에 기입 ex) 제곱수 표현
◦
<ins></ins> → 밑줄 추가
◦
<del></del> → 취소선 추가
•
링크 태그
*속성 : 태그에 대해 추가적인 정보 제공, HTML의 모든 태그는 속성을 가질 수 있음
◦
<a 키="값"></a> : 값은 따옴표'' 큰따옴표""로 묶여야함
키, 값은 여러 개 쓸 수 있지만, 꼭 띄어쓰기로 구분해야함
*href : 연결할 웹 사이트 주소를 담고 있음
◦
<a href="http://www.google.com">구글</a>
•
URL (Uniform Resource Locator) = 주소(Address) + 경로(Path)
→ 인터넷에서 HTML 페이지, CSS 문서, 이미지 등 자원(Resource)의 위치를 나타냄
경로예시) "XX아파트" → "A의 방" → "A"
◦
절대 URL (Absolute URL)
→ 접근하는 최초 시작점부터 경유한 경로를 모두 기록하여 리소스의 위치를 나타냄
◦
상대 URL (Relative URL)
→ 기준점을 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타냄
절대 URL : 경기도 수원시 XX아파트/A의 방/A → 경로는 "/"로 표현
상대 URL : A → 리소스가 현재 있는 위치
•
target → 우클릭으로 링크를 열때 어디에 오픈할 것인지 정하는 속성
◦
target="_self" → 현재 탭에서 링크를 여는 속성
◦
target="_blank" → 새 탭(창)에서 링크를 여는 속성
•
이미지 태그 : <img src="이미지URL">
src="이미지URL" : 불러올 이미지의 URL을 속성 값으로 가짐 (src→source(근원)의 약자)
◦
<img src="이미지URL" alt="사진 설명">
alt="사진 설명" → 불러올 이미지가 없거나 불러오는데 실패했을 경우 대신 표시되는 문장(alt→alternative text(대체 문구)의 약자)
▪
weight="수치", height="수치" : 이미지의 높이와 너비를 지정할 때 쓰는 속성 ( CSS에서 조정하기를 권장 )
+) 유튜브 영상 업로드
<iframe src="https://www.youtube.com/embed/유튜브영상ID"></iframe>
→ 유튜브 사이트 내 영상 공유 버튼 클릭 후 영상 코드 복사 + 붙여넣기
•
테이블의 구성
◦
<table> : 표 전체를 감싸는 태그
◦
<tr> : 표에서 행을 구분하는 태그
◦
<th> : 표의 행 내부에 제목 셀을 담는 태그
◦
<td> : 표의 행 내부에 데이터 셀을 담는 태그
▪
rowspan="숫자" : "숫자"만큼 셀이 행을 점유
▪
colspan="숫자" : "숫자"만큼 셀이 열을 점유
<table>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
A B(제목행)
a b(데이터행)
// 제목행을 세로로 만들려면 tr줄에 맞게 th와 td의 순서를 배치해준다.
HTML
복사
•
목록
◦
순서 없는 목록(Unordered List)
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ul>
HTML
복사
◦
순서 있는 목록(Ordered List)
<ol>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ol>
HTML
복사
<ol>태그 속성
◦
start="숫자" : 리스트가 시작하는 숫자를 정함
◦
type="문자" : 순서를 시작하는 문자를 정함
◦
reversed : 순서를 반대로 시작. 다른 속성과 달리 키(Key)만 써서 사용
<li>태그 속성
◦
value="숫자": 해당하는 리스트 아이템의 번호를 지정
•
폼 태그
•
<form> 태그 : 폼에 포함되는 다양한 입력 양식 태그들을 감싸줌
◦
action : 데이터를 보낼 URL을 지정
◦
method : 보내는 방식을 지정
▪
method="get" : 데이터를 URL 끝에 붙여 눈에 보이게 보냄 (ex.엽서)
GET방식 특징 → 데이터 조회 만을 목적으로 할 때 주로 쓰임
▪
method="post" : 데이터를 URL에 적지 않고 내부에 숨겨서 보냄 (ex.편지)
POST방식 특징 → 서버에 있는 데이터를 쓰거나 수정, 삭제할 때 주로 사용
•
<input> 태그 : 사용자에게 입력을 받기 위해 사용되는 태그, 빈 태그
◦
<input type="text"> : <input> 태그의 종류를 결정 ( 종류가 어마어마하게 많음 )
◦
<input type="text" name="id"> : <input> 태그 중 같은 타입과 구분되는 이름을 결정
◦
<input ~~ placeholder="아이디를 입력하세요."> : input에 아무 값도 입력되지 않았을 때 나타나는 텍스트
◦
<input ~~ value="soonho"> : 실제 할당되는 값, 우리가 데이터를 넣으면 이 속성에 값이 들어감. 초기값처럼 둘 수 있음.
•
<label> 태그 : 해당하는 라벨을 클릭 시 <input> 태그가 활성화 됨
◦
<input> 태그의 id 속성과 함께 사용된다. <label>태그를 <input>태그 앞에 사용해준다.
◦
<label for="password">비밀번호</label> <==> <input id="password">
•
<div> 태그 : 태그들을 구분 짓고 나누기 위해 사용되는 태그 ( division의 약자 )
•
<select> 태그 : 여러 개의 선택지를 제시하고 싶을 때 씀
◦
<select name="gender"> : <input> 태그의 name 속성과 동일하게 작동
◦
<option value="male">남성</option> : <input> 태그에서 입력한 value 값과 동일한 역할
<div>
<label for="gender">성별: </lable>
<select name="gender" id="gender">
<option value="male">남성</option>
<option value="female">여성</option>
</select>
</div>
HTML
복사
•
<textarea> 태그 : 한 번에 많은 글을 입력 받을 때 사용
<div>
<label for="introduce">자기소개: </label>
<textarea name="introduce" id="introduce" cols="30" rows="10" placeholder="자기소개를 입력하세요."></textarea>
</div>
HTML
복사
•
<button> 태그 : <input> 태그의 버튼타입과 동일하게 버튼을 생성
◦
<input type="button" value="회원가입"> == <button type="submit">회원가입</button>
◦
<button> 태그 사이에 이미지 태그도 넣어줄 수 있다.
◦
<button type="submit">제출</button> : 입력한 정보를 주소에 담아 넘겨줌
◦
<button type="reset">리셋</button> : 입력했던 값들을 모두 초기화 시켜줌
CSS
CSS 구성요소 : 선택자, 속성, 값, 선언, 선언블록
"이 문단에는 폰트는 맑은 고딕, 크기는 18px, 색은 파랑으로 해주세요"
p{
fon-family: '맑은 고딕';
font-size: 18px;
color: blue; --> 마지막에 ;(세미콜론)으로 구분하는 "선언"
} --> 중괄호로 이루어진 "선언블록"
p ->선택자(Selector) - "이 문단에는"
color, font-size ->속성(Property) - "크기는", "색은"
18px, blue ->값(Value) - "18px", "파랑"
CSS
복사
•
선택자(Selector) : 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할
•
속성(Property) : 지정할 스타일의 속성명에 해당/ 속성: 값;이 한 단위/ ;(세미 콜론)을 이용해 구분
•
값(Value) : 키워드나 특정 단위를 이용하여 원하는 스타일을 적용, 속성(Property)와 쌍을 이룸
•
HTML에 CSS를 적용하는 방법
#test.css
h1 { color: red; } // 미리 색을 바꿔주는 test.css 이름의 CSS 코드를 작성해둠.
//아래 3가지 방법에 적용시켜본다.
CSS
복사
◦
Link style : HTML 외부에 있는 CSS 파일을 불러옴 (가장 일반적인 방법)
<head>
<title>수노입니다.</title>
<link rel="stylesheet" href="test.css">
</head> // 같은 폴더내의 CSS 파일이름을 넣어 연결함.
HTML
복사
◦
Embedding style : HTML의 <head>에 <style>를 이용하여 CSS를 작성
<head>
<title>수노입니다.</title>
<style>
h1 { color: red; }
</style> // CSS 코드를 style 태그안에 그대로 동일하게 적어주면 된다.
</head>
HTML
복사
◦
Inline style : HTML 요소에 직접 style 속성(Attributes)을 이용하여 CSS를 작성
<body>
<h1 style="color: red;">수노입니다.</h1>
</body> // 각 요소에 CSS코드를 적용하기 때문에 선택자가 필요없음.
// 해당 요소에만 적용되기 때문에 다른 요소에는 영향을 미치지 않는다.
HTML
복사
•
선택자 기초
일반적인 태그 → h1, p, span, div, a, , , ,
h1 {
color: red;
}
p {
color: red;
}
// 내용이 같고 선택자만 다른 코드를 하나하나 쓰는 것은 굉장한 낭비!!
// 아래와 같이 ,(콤마)를 이용하여 합쳐 쓴다.
h1, p{
color: red;
}
CSS
복사
•
단순 선택자
타입(Type), 클래스(Class), 아이디(Id), 전체(Universal), 속성(Attributes)
◦
타입 선택자(Type Selector) : 해당 태그를 가지는 모든 요소에 스타일을 적용
p(태그종류) { color: red; } → p 태그에 해당하는 모든 요소에 스타일 적용
◦
아이디 선택자(Id Selector) : Id로 스타일을 적용, 해당 Id 하나에 적용 (Id는 단 하나!)
▪
아이디(Id) : HTML 문서 내에서 동일한 아이디는 존재할 수 없음. 다른 요소와 구분되는 점을 만들어준다.
#아이디이름 { background-color: yellow; } → 아이디명에 해당하는 요소에 스타일 적용(#)
◦
클래스 선택자(Class Selector) : 클래스 이름으로 스타일을 적용. 같은 클래스 이름이면 모두 적용
▪
클래스(Class) : 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음, 여러 번 사용 가능
<p class="클래스이름">내용</p> : 태그안에 class="클래스이름"으로 클래스를 지정한다.
.클래스이름 { font-size: 24px; } → 클래스이름에 해당하는 모든 요소에 스타일 적용(.)
◦
전체 선택자(Universal Selector) : 모든 요소에 스타일을 적용. 모든 요소에 적용하기 때문에 속도 저하 가능성이 있음.(권장X)
*{ color: red; } → 모든 요소에 스타일 적용(*)
◦
속성 선택자(Attributes Selector) : 특정 속성을 소유하는 모든 요소에 스타일을 적용
선택자[속성명="속성값"] { color: red; }
ex) a[target="_blank"] { color: red; } a 대신 #아이디명 도 동일하게 동작함.
•
복합 선택자
"부모 - 나 - 자식"
나: article → 자식: div
→ 자식: div → 자식of자식: p
→ 자식: p
// 위 구조와 동일한 코드
<article>
<div></div>
<div>
<p></p>
</div>
<p></p>
</article>
HTML
복사
→ 나에 포함된 자식(Child), 자식과 자식or자식을 모두 포함한 후손(Descendant)
◦
자식 선택자(Child Selector) : 선택자 A의 모든 자식 중 선택자 B와 일치하는 요소 선택
선택자A > 선택자B { color: red; }
ex) article > p { color: red; } → article 내부의 직계 자식인 p 태그들만 빨간색으로 적용
◦
후손 선택자(Descendant Selector) : 선택자 A의 모든 후손 중 선택자 B와 일치하는 요소 선택
선택자A 선택자B { color: blue; }
ex) article p { color: blue; } → 직계자식 뿐만아니라 그의 자식까지 모두 포함(후손)
•
Pseudo 클래스 선택자 : 요소의 특별한 상태를 지정할 때 씀
◦
:link : 방문하지 않은 링크일 경우
◦
:visited : 방문한 링크일 경우
◦
:hover : 요소에 마우스가 올라와 있을 경우
선택자:pseudo-class {
속성: 속성 값;
}
a:link { color: yellow; }
a:visited { color: green; }
a:hover { background-color: blue; }
CSS
복사
pseudo(가상의) 클래스 : 요소의 특별한 상태를 지정할 때 씀
•
class : 비슷한 특징을 지니는 요소들을 그룹화 함
값, 단위, 색
•
숫자값과 백분율
•
CSS 값의 종류 → 숫자값, 키워드, 색
◦
숫자값 : 너비, 높이, 글자 크기 조정 / 단위 중요! { px, em, rem }
▪
px (절대적인 길이)
▪
em (상대적인 길이) : 현재 스타일이 지정된 요소의 font-size 기준
▪
rem (상대적인 길이) : 최상위 요소의 font-size 기준
1em(1rem)의 크기 = 기준 font-size * 1em(1rem)
rem 사용 권장
▪
% (퍼센트) : 상대 길이, 보통 이미지나 레이아웃의 너비나 높이를 지정할 때 씀
◦
색상
▪
hex code : #을 포함한 숫자로 이루어진 값 ( ex. #FF2222 )
이미 지정된 색 값 뒤에 숫자를 더 적어주면 색이 바뀜
▪
rgb : red, green, blue 세 값으로 이루어진 값 ( ex. rgb(0, 0, 255) )
rgba라고 지정 시, 총 4개의 값을 넣을 수 있으며 색을 바꿀 수 있음. ex) rgba(0, 0, 255, .5)
▪
hsl
•
폰트와 관련된 프로퍼티
◦
font-size
◦
font-familiy
▪
font-family: 'Cute Font', Arial, cursive;
두 단어 이상으로 된 폰트는 ' '(작은 따옴표)로 묶어주어야 한다.
여러 개의 폰트들을 나열할 수 있으며, 앞에서부터 차례로 폰트가 우선 적용된다.
→ 그래서 마지막에 위치한 폰트는 어떤 환경에서도 적용되는 '일반 글꼴'을 적용한다.
•
웹 폰트 ( 링크를 통해 쉽게 폰트를 불러오는 방법 ) : Google Font 이용
◦
font-style
▪
normal : 기본체
▪
italic : italic체가 디자인 되어있는 폰트에서만 사용가능
▪
oblique : 문자를 기울여 표현
◦
font-weight
▪
bold : 글씨 굵게 표현
▪
100 ~ 900 범위 설정 : 400 → normal, 700 → bold 에 해당
font : oblique 900 35px 'Noto Sans KR', sans-serif; → 이처럼 한 번에 설정 가능
•
텍스트 정렬과 관련된 속성
◦
text-align : 텍스트를 좌, 우, 중앙 정렬함
h1 { text-align: center; } or p { text-align: right; } 등등 자기 자신을 기준으로 정렬됨
◦
line-height : 문장 사이의 간격을 조정함
line-height: 24px;, line-height: 2(2배) → 단위 없는 숫자를 쓰면 해당 폰트의 (몇)배를 뜻한다.
◦
letter-spacing : 글자와 글자 사이의 간격을 조정함, 자간
letter-spacing: 5px; 글자 하나하나 사이가 5px만큼 띄워짐
◦
text-indent : 문단의 시작부에 들여쓰기를 함
text-indent: 15px; 해당 문단 맨 앞이 15px만큼 띄워짐
•
박스 모델 개념 { HTML의 모든 요소는 상자(Box) 형태를 가진다. }
박스 모델 구성요소 → 내용(Content), 마진(Margin), 경계선(Border), 패딩(Padding)
◦
Content와 Border
▪
border-style: dashed double dotted solid;
▪
border-width: 6px 8px 10px 12px;
▪
border-color: red blue yellow green;
•
설정 값이 4개인 경우 : 순서대로 윗부분부터 시계방향 순으로 적용된다.
•
설정 값이 3개인 경우 : 순서대로 위, 왼 and 오, 아래 순으로 적용된다.
•
설정 값이 2개인 경우 : 순서대로 위 and 아래, 왼 and 오 순으로 적용된다.
•
설정 값이 1개인 경우 : 위, 아래, 왼, 오 전부 동일한 값으로 적용된다.
border: 4px solid lemonchiffon; → 나열해줌으로써 깔끔하게 사용 가능하다.
▪
border-radius : 경계선을 둥글게 적용해줌
•
border-top-left-radius
•
border-top-right-radius
•
border-bottom-left-radius
•
border-bottom-right-radius
◦
border-?-?-radius: 10px (값 1개) → 값의 반지름을 가지는 원을 이룸
◦
border-?-?-radius: 30px 10px (값 2개) → 순서대로 왼and오, 위and아래 의 반지름을 가지는 타원형을 이룸
◦
padding과 margin
▪
padding <경계선의 내부 여백> → 설정 값 4개까지 지정가능
▪
margin <경계선의 외부 여백>
서로 다른 두 요소를 위 아래로 배치할 때 마진 상쇄(Margin Collapse)가 일어난다. 큰 부분을 기준으로 작은 부분이 상쇄됨.
▪
box-sizing
•
box-sizing: content-box; (기본값) ⇒ width(height) = content size
•
box-sizing: border-box; ⇒ width(height) = content size + padding + border
•
위치와 관련된 프로퍼티 1
◦
display : 요소가 보여지는 방식을 지정
HTML요소 : block element (display: block;), inline element (display: inline;)
▪
block element → 항상 새로운 줄에서 시작하며 따로 width를 지정해주지 않아도 width 100%를 가지고 있음. (<div>, <h1>~<h6>, <p>, <header>, <section> 등)
•
width, height, margin, padding 가능
▪
inline element → 새로운 줄에서 시작하지 않고 컨텐츠 크기에 필요한 만큼의 너비만 가진다. (<a>, <span>, <img> 등)
•
width, height, margin-top, margin-bottom 불가능
▪
inline-block → inline 요소의 불편함을 보완하기 위해 나옴. block과 inline의 요소가 합해진 것.
•
width, height, margin-top, margin-bottom 가능
+) display: none; → 해당 요소가 화면에 출력되지 않게 할 수 있다.
◦
position : 요소의 위치를 정의
▪
position: static; → 기본값, 좌표 프로퍼티를 쓸 수 없음
▪
position: relative; → 상대 위치, 기본 위치를 기준으로 좌표를 사용함
#child {
width: 100px;
height: 100px;
position: relative; -> 기본 위치(static)를 기준으로 위, 왼쪽에서 20px씩 움직인다.
top: 20px;
left: 20px;
}
CSS
복사
▪
position: absolute; → 부모나 조상 중 relative, absolute, fixed가 선언된 곳을 기준으로 좌표 프로퍼티 적용 ( 인라인 블럭과 같다고 생각 )
▪
position: fixed; → fixed는 보이는 화면을 기준으로 좌표 프로퍼티를 이용하여 위치를 고정 (스크롤 내릴 때도 정해진 위치에 계속 고정됨)
▪
z-index: 숫자; → ex. 숫자 1과 2가 있다면 1에 해당하는 요소가 2에 해당하는 요소 아래에 위치한다. 값이 1만 차이나도 비교되므로 우선순위를 지정해줄 수 있다.
•
위치와 관련된 프로퍼티 2
◦
flexbox
가로 혹은 세로 방향으로 정렬함. 요소들을 띄엄띄엄 배치하거나 꽉 채워 배치하기도 하여 한줄한줄 줄세워 요소들을 배치한다. (웹 레이아웃 구성 방식)
▪
flex container (부모 요소) ← display: flex; 추가!!!해주어야 함
•
flex-direction : flex 컨테이너 안의 item들의 방향을 정함 (기본 row)
◦
flex-direction: row; : 왼 → 오
◦
flex-direction: row-reverse; : 오 → 왼
◦
flex-direction: column; : 위 → 아래
◦
flex-direction: column-reverse; : 아래 → 위
•
flex-wrap : flex 아이템이 flex 컨테이너를 벗어났을때 줄을 바꾸는 속성
◦
flex-wrap: nowrap; ( 컨테이너를 벗어나도 줄을 바꾸지 않음{기본} )
◦
flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
// flex-flow로 방향과 wrap 방식을 한 번에 설정이 가능하다.
flex-flow: row wrap;
CSS
복사
•
justify-content : flex-direction으로 정해진 방향을 기준으로 수평으로 item을 정렬하는 방법을 정함
flex-direction: row; → 수평방향 / flex-direction: column; → 수직방향
◦
justify-content: flex-start; (기본값) : 앞을 기준으로 정렬함
◦
justify-content: center; : 가운데를 기준으로 정렬함
◦
justify-content: flex-end; : 끝을 기준으로 정렬함
◦
justify-content: space-around; : 시작과 끝에 빈칸이 생기게 동일한 간격으로 정렬함
◦
justify-content: space-between; : 시작과 끝에 하나씩 두고 사이에 나머지를 동일한 간격으로 정렬함
•
align-items : flex-direction으로 정해진 방향을 기준으로 수직으로 item을 정렬하는 방법을 정함
→ flex-direction: row; <수직 방향>, flex-direction: column; <수평 방향>
◦
align-items: stretch; (기본값) : 수직방향을 기준으로 꽉 채워 맞춤
◦
align-items: flex-start; : 수직방향을 기준으로 첫 시작지점으로 맞춤
◦
align-items: flex-end; : 수직방향을 기준으로 끝 지점으로 맞춤
◦
align-items: center; : 수직방향을 기준으로 가운데에 맞춤
▪
align-items: baseline; : 글꼴의 baseline을 기준으로 맞춤
•
align-content : flex-direction으로 정해진 방향을 기준으로 수직으로 여러 줄인 item을 정렬하는 방법을 정함
◦
align-content: stretch; (기본값) : 수직방향을 기준으로 간격 없이 꽉채워 모든 줄을 정렬함
◦
align-content: flex-start; : 수직방향을 기준으로 첫 시작지점으로부터 모든 줄을 정렬함
◦
align-content: flex-end; : 수직방향을 기준으로 마지막 지점으로부터 모든 줄을 정렬함
◦
align-content: center; : 수직방향을 기준으로 가운데에 모든 줄을 정렬함
◦
align-content: space-between; : 수직방향을 기준으로 양 끝에 한 줄씩 배치시킨 뒤 사이에 모든 줄을 동일한 간격으로 정렬함
◦
align-content: space-around; : 수직방향을 기준으로 양 끝에 빈칸이 생기도록 모든 줄을 동일한 간격으로 정렬함
▪
flex item (자식 요소)
•
flex-grow : flex 아이템의 확장과 관련된 속성, 기본 0 (단위 없는 숫자 사용)
◦
flex-grow: 0; <0인 경우> → 컨테이너 크기의 확장과 관련없이 아이템 크기에 맞게 배치
◦
flex-grow: 1~; <1이상인 경우> → 숫자가 큰 쪽을 기준으로 더 확장이 넓게 배치되어 컨테이너 부분을 전부 채운다.
▪
ex) 0과 1 → [0, 1, , , ,] ⇒ [ 0 , 1 ] (숫자가 큰 1 쪽으로 더 치우침)
•
flex-shrink : flex 아이템의 축소와 관련된 속성, 기본 1 (단위 없는 숫자 사용)
◦
flex-shrink: 0; <0인 경우> → 컨테이너 크기의 축소와 관련없이 아이템 크기가 그대로 유지됨
◦
flex-shrink: 1~; <1이상인 경우> → 숫자가 큰 쪽이 더 축소되어 컨테이너 크기에 맞게 배치됨
▪
ex) 2와 1 → [ 2 , 1 ] ⇒ [ 2 , 1 ]
•
flex-basis : flex 아이템의 기본 크기를 결정함, 기본 auto (단위가 꼭 필요함)
•
flex : flex-grow, flex-shrink, flex-basis의 축약형
◦
ex) flex: 0 1 auto; (순서대로 적용, flex-shrink만 적용된 상태)
•
상속과 우선순위
상속이 되지 않는 프로퍼티를 값을 상속받기 원한다면 inherit을 써주면 된다.
ex) margin: inherit;
•
Cascading 적용 우선 순위
◦
우선 순위 {규칙} (위에서 아래로 중요도 높은 순서)
1.
중요도
a.
<head> 태그 내의 <style> 태그
b.
<head> 태그 내의 <style> 태그 내의 @import문
c.
<link> 태그로 연결된 CSS
d.
<link> 태그로 연결된 CSS 내의 @import
e.
문브라우저 디폴트 스타일시트
2.
명시도
a.
!important
b.
인라인 스타일(inline style)
c.
아이디 선택자(Id selector)
d.
클래스(class), 속성(attributes), 가상클래스 선택자(pseudo class selector)
e.
태그 선택자(type selector)
f.
전체 선택자(universal selector)
g.
상속(inherit)
아이디 선택자가 우선순위가 높기 때문에 클래스별로 적용시키려 해도 덮어씌워진다. → < 기본규칙 : Id 선택자를 쓰지 말 것! >
3.
선언 순서 : 나중에 선언된 스타일이 우선 적용 ( 잘 생각해서 코드 작성! )
•
부트스트랩 → 웹 제작에 도움되는 오픈소스 프론트엔드 프레임워크
◦
본인이 필요한 부분들을 찾아 가져다가 쓸 수 있는 편리한 시스템
◦
그리드 시스템을 쉽게 구현할 수 있다
◦
반응형 웹을 구현할 수 있다.