1. line-height : 한줄의 높이, 행간과 유사
2. 폰트 글꼴은 구글폰트 및 눈누 포트 사용하면 됨
Lorem이라고 치면 기본 글이 써짐
3. 눈누폰트
4. 구글 폰트 적용법
5. 글자의 투명도
투명도는 0~1 까지 있음
6. text-decoration
underline, none, line-through
7. inline 요소
- <span></span> : 대표적인 인라인 요소, 요소가 수평으로 쌓임
- span태그는 width, height를 지정해봤자 반응이 없음
- 인라인 요소 안에는 블록요소를 삽입하지 못함
<span><div></div></span> => 불가능함
<span><span></span></span> => 가능함
8. block 요소
- <div>는 width, height를 지정할 수 있음
<div><div></div></div> => 가능함
<div><span></span></div> => 가능함
9. inline-block 요소
- block 요소가 수직으로만 쌓이는 문제점 해결을 함
-
10. margin
11. padding
-> 컨텐츠와 테두리 사이의 간격
inline-block에서 auto 있으면, 가로 및 세로는 컨텐츠 크기만큼 차지하게 된다.
vw는 스크롤바까지 포함을 해서 계산을 한다.
12. Calc() ; 사용자가 원하는 크기 값을 계산하여 적용함
ex :Calc(100vh - 20vw)
Calc(1920vh - 10vw)
13. border : 선, 두께
- none, solid, dashed(파선)
- border-color : black, transparent
14. 중앙 정렬
margin : Calc((100vh-10vw)/2) auto;
15. box sizing : content box, border box가 있지만 대부분 전자 사용한다.
16. opactity
- 1 : 불투명, 0~1 : 이 사이로 투명도 설정
17. 요소를 숨기는 3가지 방법
- opacity : 투명하게 만들기, 모습만 숨기는 방법, 자리 차지함 => opacity해놓은 무언가 밑에 버튼이 있으면 그게 눌림
- visibility:hidden : 모습과 속성을 숨기는 방법, 자리 차지 => 얜 아
- display: 자리도 모습도 사라지게
18. overflow : 요소의 크기 이상으로 내용이 넘쳤을 보여짐을 제어하는 특성임
- visible : 기본 특성
- hidden
- scroll : 스크롤바를 통해서 넘친 내용을 확인하게 해줌, 안 넘쳐도 스크롤 있음
- auto : 위와 같지만 넘칠 떄만 스크롤 있음
19. overflow-x, overflow-y
- 대부분 overflow-x는 hidden
20. legend 태그와 filedset태그
<filedset>
- <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용.
- 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줌.
<legend>
- <legend>를 사용하면 <filedset> 요소의 캡션을 정의할 수 있음.
=> 글자를 둘러싼 글씨가 생긴다.
<form action="/examples/media/action_target.php" method="get">
<fieldset>
<legend>학사 관리 로그인</legend>
이름 : <input type="text" name="st_name"><br>
학번 : <input type="text" name="st_id"><br>
학과 : <input type="text" name="department"><br>
<button type="submit">제출하기</button>
</fieldset>
</form>
'컴공 공부' 카테고리의 다른 글
| 에러들 해결 (0) | 2023.08.01 |
|---|---|
| Node.js / nodemon 초기설정 (0) | 2023.08.01 |
| [Node.js] 비동기 처리 (0) | 2023.07.29 |
| HTML 태그 공부 (0) | 2023.07.04 |
| [포스코X코딩온] 웹 풀스택 과정 1주차 회고 | Git 설치 (0) | 2023.07.03 |