HTML/CSS
1.1. HTML
HTML : Hyper Text Markup Language1) HTML이란?웹 페이지를 만들기 위한 언어웹페이지 구조를 잡는다HTML 파일은 이미지, 텍스트, 비디오, 버튼... 등 웹 사이트에 보여줄 내용을 구성한다.2) 확장자HTML파일 : .html 확장자가 붙
2.2. HTML tags
<!DOCTYPE> <html> <head> </head> <body> </body> </html>가장 첫 줄에 위치해야하는 선언문무슨 버전의 HTML을 사용했는지 브라우저에 알려주는 역할
3.3.HTML Attribute(속성)
<a href="주소"> 이동 </a>href가 a태그의 속성 중 하나html attribute는 종류가 다양하며, 태그에 따라 사용할 수 있는 속성도 다르다.대표적 : id, class 각 태그에 이름을 주는 속성단 하나밖에 없는 고유의 값. 즉, 중복된
4.4. CSS
Cascading Stlye SheetsHTML 태그들에 디자인을 꾸며주는 것형태 : <태그 style="스타일 내용"> 내용 </h1>태그 안에 style이라는 속성을 통해 스타일을 꾸민다.매우 간편하지만 스타일 내용이 많으면 코드가 더럽고 관리하기 힘듬.
5.5. CSS_ Font 스타일
* font 스타일 : 텍스트와 관련된 스타일 1. font-family 폰트 스타일을 지정하는 속성 예) #title { font-family: Georgia, "Times New Roman", Times, serif; } Georgia -> Times New
6.6. CSS_문구 스타일
형태 : .dad { text-align: value;}value : left, center, right1) left : 왼쪽 위치 기본 정렬은 왼쪽 정렬2) center : 가운데 위치3) right : 오른쪽 위치들여쓰기형태 : .js-description {
7.7. CSS_ margin & padding & border
0. margin / padding 모든 요소는 margin, border, padding의 스타일을 가지고 있다. border : 스타일을 주면 테두리가 생김 padding은 border 내에 생기는 영역 margin은 border 외부에 생기는 여백 1) mar
8.8.box-sizing
box-sizing : 각 요소마다 너비, 높이... 크기가 있다. 이를 꾸며주기 위해서는 padding, width를 사용하는데 계산하기가 힘들다.이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었다.요소의 너비와 높이를 계산하는 방법CSS 박스
9.9. CSS_상속(Inheritance), 그룹(Grouping)
css가 가진 특성스타일이 상속되어 자식에게도 같은 스타일이 적용된다.예)html 파일 <body> <p>나는 p태그</p> </body> cssbody { color: red; font-size: 14px;}결과 : p태그의 내용도 적
10.10. CSS _ CSS selector
1) 일반태그와 id선택자형태 : 일반태그 + .class { 스타일 }예) html <p class="third-line">나는 p태그, class도 있고 id도 있다.</p>css p.p-tag { color: gray;}결과 : p태그 중, cla
11.11. HTML/CSS _ img태그 관련
형태 : <img alt="HTML" src="이미지 경로">예) <img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘
12.12. CSS _ Block & Inline
대부분 HTML element는 block 요소.block 요소 : header, footer, p, li, table, div, h1block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻.블록 레벨 요소는 언제나 새로운 줄에서 시작
13.13. HTML/CSS _ List
1.List : 리스트 형태 : <ol> <li> 값1 </li> <li> 값2 </li> <li> 값3 </li> <li> 값4 </li> <li> 값5 </li> </ol> ol : ordered list -->
14.14. HTML/CSS _ Table
형태 : <table> <th>테이블 <th>만들기 <tr> <td>첫번째 칸</td> <td>두번째 칸</td> </tr> <tr> <td>첫번째 칸</td>
15.15. HTML/CSS _ Input, Textarea
형태 : <input>속성 : type /placeholder1) type : text, password, numbertext : 일반 텍스 입력 창<input type="text" placeholder="ID">password : 패스워드 공간 (\*으로
16.16. CSS_ Position
Position : 조금 더 복잡한 레이아웃을 만들기 위함종류 : relative / absolute1) position : relative별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작합니다.(의미 없음)위치를 이동시켜주는 top, right, bo
17.17. CSS_ 레이아웃 [float]
float은 이미지 주위를 텍스트로 감싸기 위해 만들어진 것.img { float: right; margin: 0 0 1em 1em;}float의 동작 방식을 제어하는 데 중요하다예)html<div class="box">...</div><sectio
18.자주 사용하는 CSS 활용_box-sizing
1) 기초요소의 너비와 높이를 계산하는 방법을 지정하는 것css 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘테츠 박스 크기에만 적용한다.요소의 테두리/안쪽 여백까지 함께 더해서 화면에 그려지기 때문에 실제 설정한 크기와 다를 수 있다.그래서 원하는 크기를
19.자주 사용하는 CSS 활용 _ position
절대 위치 지정 요소절대 좌표와 함께 위치를 지정한다.부모태그가 있는 경우 부모 태그를 기준으로 잡는다.부모태그의 모서리부분을 기준으로 거리를 계산한다.부모태그가 없는 경우 가장 가까운 요소를 기준으로 거리를 계산한다.부모태그도 없고, 가장 가까운 태그도 없는 경우
20.자주 사용하는 CSS 활용 _ display / visible
웹 페이지 상에서 요소들이 어떻게 보여지고, 다른 요소와 어떻게 상호 배치 되는지 결정한다inline으로 지정된 요소는 전후 줄바꿈 없이 한 줄에 여러 요소들을 나란히 배치하는 것주의 할 점 : inline은 width / height 속성을 지정해도 무시해버린다...
21.자주 사용하는 CSS 활용 _ diplay : flex
0. 수평 구조... 대부분 사이트의 레이아웃은 위에서 아래로 되어 있다. 뷰는 수직(위에서 아래로)으로 쌓인다. 반대로 수평(좌에서 우로)으로 구성하는 것은 다르다. 수평 구조를 만드는 속성은 명확하지 않기 때문에 여러 속성들을 사용한다. 대표적 : table, fl
22.자주 사용하는 CSS 활용 _ margin : 0 auto
margin : 값값에 위 좌 아래 우 여백을 의미한다.margin : 0 의미 - 위 좌 아래 우 여백을 지정하지 않는다는 뜻이다.CSS결과개발 도구 element 결과 : margin는 아무것도 없는 것으로 나온다.margin : 50px 위 좌 아래 우 여백을 5
23.자주 사용하는 CSS활용_ 높이 자동 설정
높이를 설정하고 그 안의 컴포넌트를 여러개 넣을 경우 박스영역을 벗어나 제대로 영역을 확보하지 못한다.자동으로 안에 있는 요소들에 따라 크기를 변경하기 위해서는 height를 auto로 하고, overflow를 hidden으로 하면 자동으로 안에 있는 요소들이 늘어나도
24.Sass
0. Sass 1) Sass css의 확장 버전 css의 결함을 보정하는 것 stylesheet를 보다 쉽게 관리할 수 있는 다양한 기능 구현 가능 > 특정 속성을 변수로 선언하여 재사용이 가능 함. [Variables] > 반복된 코드를 한번에 선언 할 수 있음 [
25.자주사용하는 CSS _ 애니메이션 (1) : keyframe
@keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법animation-name : 사용자가 직접 @keyframes에 적용 할 변수 이름from - to : 시작 부분과 끝날 부분 0~100%CSS 스타일 :