TIL - [DAY 5]

너무 절망만 많이 한 것 같아 배운 내용 복습 겸 완성해야하는 포폴겸 유튜브를 보고 차근차근 해보기로 하였다.

 

유튜버 '타모 디자인'에 빠르게 정리가 잘 되어 있길래 보게 되었다.

듣고 나니 왜 그렇게 힘들어 했는지 모르겠다.

혼자 복기 하는 건 천천히 필요할때 공부하는 거고 간단한 필수만 되짚어야 했었는데 너무 무겁게 생각했다.

이래서 매일 흥미로 시작한 공부도 포기했던 거구나...

 

근데 태그를 보고는 알겠는데 완전히 아는게 아니라 그런가 게임을 할땐 진짜 모르겠던데...ㅜ

---

1. block 과 inline 태그의 차이 (div, span)

block tag : div : 가로로 붙는 것 처럼 보인다 (하지만 배경색을 넣어보면 알 수 있드시 한줄 전채를 차지하고 있는 중)

inline tag : span : 세로로 붙는 것 처럼 보인다 (글자 만큼을 영역만 먹고 있다)

class : 이름을 짓는다 : <div class="box"> => .box {}

id : 이름을 짓는다 : <div id="box"> => #box {}

class="blockTag"의 자식요소 div 선택 : .blockTag > div {}

 

+ html 주석 <!-- --> css 주석 /* */

 

2. 제목태그와 목록태그 (h1, ul li)

<h1>~<h6>

<ul>

   <li></li>

</ul>           : <li>로 작성된 text앞에는 점이 붙는다

그럼 <style>항목에 .li { list-style:none;} 을 입력해주면 리스트된 점이 사라진다

 

3. 입력양식, form과 input태그

<form> 서버, 데이터베이스 등에 전송할때 쓰임

   <input type="text"> 내용을 적을 박스

   <input type ="submit"> 전송 버튼

</form>

input태그는 line 요소 -> 여러개를 쓰면 한줄에 붙어 뜬다

=> 목록 태그, ul li를 사용해 목록을 만들어주고 style을 none으로 설정

+ chexkbox, raido

<label type="checkbox" name="fruit" id="orange"></label>

label에 묶어주고 name이라는 '속성'으로 한 분류를 묶어 준다 id에 각자 이름에 맞게 주었다

여러가지 선택가능

<label type="raido" name="fruit" id="orang"></label>

label에 묶어주고 name이라는 '속성'으로 한 분류를 묶어 준다 id에 각자 이름에 맞게 주었다

raido는 하나만 선택가능 해 그걸 인식시키기 위해 하나로 묶어주는 걸 name으로 지정해준다

+button

<li type="button" value="버튼입니다"></li> 버튼은 value를 사용

<li type="submit" value="저장하기></li> submit은 데이터를 검증하지 않고 데이터베이스에 보낸다

웹브라우저마다 기본 디자인이 다르다

 

4. div를 이용해 직접 디자인

<div class="colorBtn">버튼입니다</div>

css<style> .colorBtn { width : 100px; height : 36px, background-color : green; color : white; text-align : center;

line-height: 36px; cursor : pointer; border-radius: 3px;}

 

5. 이미지와 링크 넣기 (img, a[앵커, 링크 라고도 불린다])

<a href="http://www.naver.com">네이버 바로가기</a> -> 다른 페이지로의 이동

 

img이라는 이미지 이름을 가진 이미지를 작성중인 html과 같은 폴더에 넣어 둔다

<img src="img.png">확장자까지 넣어준다 -> 실무에선 img파일을 새로 만들면 img/img.png 로 경로가 바뀐다

---

ctrl + +/- = 글자 크기 축소 확대 가능

 

1. 여백과 면적의 차이 (margin, padding)

<div>

   <span>타모</span>

   <span>디자인</span>

   <span>입니다</span>

</div>    margin : 서로간의 사이를 싫어하는만큼 멀리 떨어트려

<sytel>  padding :큰 패딩을 입을 수록 덩치가 커져 면적이 늘어나

div > span { back-ground: green; padding: 10px; margin: 40px; }

</style>

 

1번째 자식요소 div > span: first-child {}

마지막 자식요소 last-child

padding-top, left, bottom, right

margin-top, left, bottom, right

 

2. 테이블 태그 다루기 (table, thead, tbody, tr, th, td)

<table>

  <thead>

  <tbody>

</table>

html 기본구조처럼 head와 body가 있다

table(테이블) 태그 : 데이터 표를 만드는 태그.
- tr 태그 : 테이블의 행[가로]을 만드는 태그.
- td 태그 : 테이블의 열[세로]을 만드는 태그.
- th 태그 : 테이블 열의 [타이틀(세로 열의 제목)]을 만드는 태그.

 

table > thead > tr > th 로 자식을 계속 태그해주지 않고 table th 로도 적용 가능

후자는 모든 table의 th에 {}를 집어 넣으라는 의미

 

테이블의 background-color를 채우면 떨어져있는 것을 볼 수 있는데,

border-collapse:  collapse; 를 사용하면 붙여준다

 

3. *선택자로 html 기본 속성 죽이기

모든 태그요소 선택

모든 요소 하나하나에 기본값 설정

*{ boder-collapse: collapse; }를 사용하면 전체적으로 간격을 없애줌

<a>로 herf를 걸면 생기는 속성 삭제 : text-decoration: none;

기본적으로 디자인전에 모든 요소를 죽여주고 시작

 

4. Position의 위치속성 비교하기 (absolute, relative, fixed)

relative : 여러 요소들과 관계된 현재 위치를 기준으로 이동

absolute : 독립적으로 좌표만을 따르는 기준 (html 전체 화면)

fixed : html 문서가 아닌 '브라우저'를 기준으로 '고정'된다

 

5. display (none, block, inline, flex)

inline요소인 span태그를 div > span { display: block;}으로 주게 되면 block요소로 변한다

마찬가지로 block요소인 div태그를 div > div { display: inline; } 을 주면 inline속성으로 변한다

none은 태그는 그대로지만 사라지게 만든다

 

부모요소에 display: flex

자식요소에 flex: 1; => 1:1로 나뉜다

몇째자식 flex: 2; => 몇째자식에게 2를 먹어라

➡️ 몇째자식 빼곤 다 1씩 먹어서 첫째라고 한다면 2:1:1... 이 된다

---

기초강좌 두개를 들었는데 수업때 들은 기억이 난다!

그런데 혼자서 바로 답은 못꺼내겠다ㅜ 계속 하다보면 어느 순간 기억나겠지..

 

이것들을 다시 적용해보며 복습하고 홈페이지 포폴 디자인 하고

내일은 홈페이지만들기 영상을 보고 연습을 해봐야겠다!

 

html, css 요소들은 나중에 천천히 적어야겠다 ^^