📌 오늘의 생각
기존에는 Notion에 TIL을 작성하였다. 하지만 다음주부터 본격적으로 백엔드 개발자로서 공부가 시작되는데, 그동안 개발자로서 TIL 작성이 처음이라 서투르고 어려워 너무 단편적으로 작성을 해왔기 때문에 조금 더 개발자로서 나의 생각을 정리하기 위해 벨로그로 다시 새롭게 시작해 보려 한다.
📒 목차
HTML
- 문자를 꾸며주는 태그
- 빈 태그
- 태그와 속성
- 이미지와 동영상 태그
- Block, Inline
- 종속 태그
- head, body
- 박스모델
CSS
- 기본문법
- 특성
- box-sizing
- css 사용방법 3가지
- css 선택자
- 정렬
HTML
⭐ 문자를 꾸며주는 태그
-
strong 태그
- 텍스트를 두껍게 만들어주는 태그이다
<strong>두껍게하기</strong>결과 : 두껍게하기
-
u 태그
- 텍스트에 밑줄을 긋는 태그이다 (underline)
<u>밑줄긋기</u>결과 : 밑줄긋기
밑줄긋기
-
h1~h6 태그
- 제목을 만드는 태그이다
<h1>제목</h1> <h2>제목</h2> <h3>제목</h3> <h4>제목</h4> <h5>제목</h5> <h6>제목</h6>결과 :
제목
제목
제목
제목
제목
제목
-
i 태그
- 이텔릭체 만들기 (텍스트 기울이기)
<i>이탤릭체 만들기</i>결과: 이탤릭체 만들기
⭐ 빈 태그
- </종료태그> 없이 사용되는 태그이다
<br> 태그
- 다음 줄로 넘어가게 만드는 태그이다
<br />
<hr>
- 수평선을 긋는 태그이다
<hr />결과 :
⭐ 태그와 속성
- 특정 태그는 속성과 속성값을 주어 구체적인 기능을 구현할 수 있다
속성(attribute)과값(value)를 주어 사용한다- 속성값은 중첩이 가능하다!!
<input type="text" /> <!-- 한줄 텍스트 입력창 생성 --> <input type="password" /> <!-- 비밀번호 입력창 생성 --> <input type="color" /> <!-- 색상 선택창 생성 --> <input type="checkbox" /> <!-- 체크박스(여러개선택) 생성 --> <input type="radio" name="group"/> <!-- 라디오버튼(1개선택) 생성 --> <a href="http://google.com">구글로 가기</a> <!-- 현재창에서 이동--> <a href="http://google.com" target="_blank">구글로 가기</a> <!-- 새창에서 이동 -->
⭐ 이미지와 동영상 태그
이미지 태그<!-- 일반이미지 --> <img src="/이미지경로/이미지.확장자" /> <!-- 배경이미지 --> <div style="background-image: url('/이미지경로/이미지.확장자')" />
동영상 태그<!-- 동영상 --> <!-- muted: 음소거 --> <!-- autoplay: 자동재생 --> <!-- loop: 반복재생 --> <video muted="muted" autoplay="autoplay" loop="loop"> <source src="동영상위치.mp4"> </video>
⭐ Block, Inline
- HTML의 모든 태그들은 각자의 사이즈를 가지고 있다
- 각자의 사이즈는 block 또는 inline 중 하나로 표현된다
Block
- 페이지의 가로를 차지한다
- 넓이 전체를 차지하는 요소이다
- ex.
<h1>,<div>,<p>
Inline
- 자신의 크기만큼 차지하는 요소이다
<span>,<input>,<a>,<button>,<label>,<text>,<checkbox>,<radio>
⭐ 종속 태그
- 다른 태그와 함께 사용되어야 작동하는 태그이다
선택박스 태그<select> <option>기쁨</option> <option>좋음</option> <option>보통</option> </select>결과 : <option>기쁨</option> <option>좋음</option> <option>보통</option>
목록 태그// 순서가 있는 리스트 // ordered list <ol> <li>순서가 있는 리스트 1번</li> <li>순서가 있는 리스트 2번</li> <li>순서가 있는 리스트 3번</li> </ol>결과:
- 순서가 있는 리스트 1번
- 순서가 있는 리스트 2번
- 순서가 있는 리스트 3번
// 순서가 없는 태그 // unordered list <ul> <li>순서가 없는 리스트</li> <li>순서가 없는 리스트</li> <li>순서가 없는 리스트</li> </ul>결과:
- 순서가 없는 리스트
- 순서가 없는 리스트
- 순서가 없는 리스트
표 태그
<tr>: 표의 행을 나타낸다<td>: 표의 열을 나타낸다,<tr>태그 하위에 위치한다<thead>: 표의 제목 영역이다,<table>하위,<tr>상위에 위치한다<tbody>: 표의 본문 영역이다,<thead>와 같은 위치에 존재한다<th>: 제목 셀을 나타낸다,<td>대신 사용한다<table> <thead> <tr> <th>학교</th> <th>창립년도</th> </tr> </thead> <tbody> <tr> <td>서울대학교</td> <td>1946</td> </tr> <tr> <td>고려대학교</td> <td>1905</td> </tr> <tr> <td>연세대학교</td> <td>1885</td> </tr> </tbody> </table>결과 :
학교 창립년도 서울대학교 1946 고려대학교 1905 연세대학교 1885
⭐ <head> / <body>
<head>
- HTML 문서에 관한 기본 정보를 포함하고 있는 영역이다
<body>
- 브라우저에서 보여지는 영역이다
<!DOCTYPE html> <html lang="ko"> <head> <title>브라우저 탭 이름</title> </head> <body></body> </html>
⭐ 박스모델
- 각각의 태그들은 모두 박스모델로 이루어져 있다
contents: 박스의 실질적인 내용 부분이다
padding: 박스의 안쪽 여백이다
border: 박스의 기준이 되는 바깥 테두리 선이다
margin: border를 기분으로 바깥쪽 여백이다
CSS
⭐ 기본문법
- 마지막에 ;(세미콜론)을 붙여주어야 한다
단일 속성 지정selector(선택자) { property(속성) : value(값) ; } .class { width : 30px; }
다중 속성 지정selector(선택자) { property(속성) : value(값) ; property(속성) : value(값) ; property(속성) : value(값) ; property(속성) : value(값) ; property(속성) : value(값) ; } .class { width : 30px; height : 30px; }
⭐ 특성
div { color: red; color: rgb(255,0,0); /* RGB */ color: #FF0000; /* HEX 값 */ font-size: 20px; /* 글자크기 */ font-weight: 300; /* 글자두께 */ text-align: center; /* 가운데 정렬 */ font-family: arial; /* 글꼴 */ width: 300px; /* 넓이 */ height: 300px; /* 높이 */ background-color: red; /* 배경색 */ border: 1px solid black; /* 테두리 */ border-radius: 5px; /* 테두리의 모서리 둥글게 */ }
⭐ box-sizing
box-sizing = content-box;
- 컨텐트 기준 크기 정한다
- 크기를 지정하면 컨텐트 크기로 적용된다
- 보더값은 크기에 포함되지 않아 전체 크기가 지정 크기보다 커진다
box-sizing = border-box;
- 보더 기준으로 크기가 정해진다
- 크기를 지정하면 contents + border 크기로 적용
- 보더값이 크기에 포함되기 때문에 크기 지정이 용이하다
⭐ css 사용법 3가지
1. html 태그 속성에 입력
- 유지보수 측면에서 비효율적이다!!
<div style="color: red">철수</div> <span style="color: blue">영희</span>
2. <style> 태그에 입력
- 유지보수 측면에서는 유리할 수 있지만 관심사 분리가 안된다
<head> <style> <span> { color: red; } </span> </style> </head> <body> <span>Hello World!!</span> </body>
3. CSS 파일 만들어 불러오기
- 실무에서 가장 많이 사용하며 유지보수가 용이하다
<link>태그 사용하여 html과 연결한다
<head> <link href="css 파일이름" rel="stylesheet" /> </head>
⭐ CSS 선택자
- 꾸밀 대상 즉, 속성을 줄 대상 의미한다
*: 전체 선택자
tag: 태그 선택자
.class: 클래스선택자
#id: 아이디선택자
tag->class->id순으로 우선순위가 적용된다
<!-- CSS 기본 선택자 --> * { color: red; } tag { color: red; } .class { color: red; } #id { color: red; } 선택자:가상상황 { background-color: red; }
⭐ 정렬
flex
- 여러 태그를 하나로 묶어서 정렬한다
- 부모박스를 기준으로 두고 움직인다
flex-dirextion : column;
- 박스를 수직으로 나열한다flex-direction : row;
- 박스를 수평으로 나열한다
position
- flex에 종속되지 않고, 박스를 개별적으로 위치시킬 수 있다
position: relative;
- 원래 위치를 기준으로 상대적으로 배치해준다
position: absolute;
- 가장 난해하기 때문에 주의해서 사용해야한다
- 주로 relative와 함께 사용한다
- 배치 기준으로 상위요소(부모)에서 찾는다
- DOM트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소를 기준으로 삼는다
- 만약 상위 요소에 positon이 static이 아닌 요소가 없다면,
<body>요소가 배치 기준이 된다- 주로 부모 요소의 display의 속성을 relative로 설정한다
position: fixed;
- 화면을 위아래로 스크롤하더하도 특정부분에 고정되어 움직이지 않도록 한다
- 배치 기준이 자신이나 부모 요소가 아닌 뷰포트, 즉 브라우저 전체 화면이기 때문에 이렇게 작동하게 된다
position: sticky;
- 화면에 끈적하게 붙어서 움직이지 않는 것
- 스크롤을 하더라도 붙어서 움직이는 것
