-
[html] 태그 정리공부/etc 2022. 7. 24. 13:33반응형
1. HTML, CSS, Javascript 차이
HTML: 텍스트, 이미지, 입력창 등 우리가 웹에서 보는 요소(Element)를 정의할 때 사용함
CSS: HTML에 정의된 요소들에 스타일(색깔, 간격, 크디 등)을 부여
JS: 버튼을 클릭했을 때, API 서버와 통신할 때 등 모든 동작들을 처리함
2. HTML
html은 2가지의 큰 구분으로 나눌 수 있다.
<html> <head> <!-- 제목 설정 --> <title>탭에 보이는 제목</title> <!-- CSS 사용하기 --> <link href="css 파일 경로" rel="stylesheet" /> <style> p { 여기에서 바로 css 코드를 작성할 수 있음 } </style> <!-- Javscript 로드, type은 작성하지 않아도 자동 인식--> <script type="text/javascript" src="파일.js"/> <script type="text/javascript"> console.log("직접 여기에 타이핑도 가능") </script> </head> <body> body </body> </thml><h1></h1> ~ <h6></h6>
<p>줄바꿈이 일어남</p>
<br/>
<a href="링크"> </a>
<img src="사진 경로" alt="설명"/>
<form> 제출할 때 </form>
<label>줄바꿈이 일어나지 않음</label>
<input type="text"/> 타이핑한 것이 보이는 입력창
<input type="password"/> 타이핑한 것이 안보이는 입력창
<input type="submit" value="전송"/> 전송이라는 이름의 버튼을 생성
3. CSS
선택자는 스타일을 적용할 대상임. 태그, id, class등을 선택할 수 있음
/* 태그를 선택자로 했을 때 */ p { color: red; } /* 태그를 id로 했을 때 */ #title { color: blue; } /* 태그를 class로 했을 때 */ .item { color: yellow; }id는 딱 한 개의 요소에만 적용이 가능
class는 class가 적용된 모든 요소에 적용함
복합 선택자
태그, id, class를 혼합하여 사용하는 것
1. 하위 선택자: 선택자1 선택자2 로 띄어쓰기를 함. 하위 선택자는 상위 선택자 안에 있는 모든 태그들 중에서 선택지2에 해당하는 태그를 선택함
2. 자식 선택자: 선택자1 > 선택자2로 ">"를 통해 구분해줌. 자식 선택자는 상위 선택자의 바로 첫번째 자식으로 있는 태그들 중에서 선택자 2에 해당하는 태그를 선택함
<html> <head> <style> #item-list p { color: red; } #item-list > p { color: blue; } </style> </head> <body> <div id=item-list> <p>첫번째 자식 아이템 1</p> <p>첫번째 자식 아이템 2</p> <div> <p>두번째 자식 아이템 1</p> <p>두번째 자식 아이템 2</p> </div> </div> </body> </html>첫번째 자식 아이템 1
첫번째 자식 아이템 2
두번째 자식 아이템 1
두번째 자식 아이템 2
CSS에서 자주 쓰이는 속성들
- 너비 - width
- 높이 - height
- 배경색 - background-color
- 글자색 - color
- 글자 크기: font-size
- 글자 굵기: font-weight
- 여백
margin: 선택자의 바깥의 여백을 설정 (margin-top, margin-left처럼 방향 설정 가능)
padding: 선택자의 내부의 여백을 설정 (padding-right, padding-bottom처럼 방향 설정 가능)\ - 테두리: border
순서대로 너비, 스타일, 색상이 들어감
아니면 border-width, border-style, border-color로 설정 가능
4. Flex Layout
HTML 요소를 자유자재로 배치하려면 Flex를 사용함
- DIV 요소는 줄바꿈이 되어 수직으로 배치가 되는데, 수평적으로 배치를 하고 싶다.
- 자식을 부모 기준 가운데 정렬을 하고 싶다.
옛날에는 float와 display(table, inline-block)등을 사용했지만, 지금은 Flex를 사용함
Flex의 핵심은 Container와 Item임
감싸주는 div의 css에 아래 내용을 추가함
- display: flex;
- flex-direction: row; (기본값은 가로인 row이고, 세로인 column으로도 설정이 가능)
justify-contents
아이템 정렬 방향과 같은 방향으로 아이템의 여백을 관리할 때 설정함
.parent { display: flex; justify-contents: center; (flex-start: 기본 왼쪽 정렬, flex-end 오른쪽 정렬, space-around: 여백 자동 조절) }center로 하면 요소가 가운데 정렬로 되어 있음
align-items
아이템 정렬 방향의 수직 방향으로 아이템의 여백을 관리할 때 설정함 (지금은 flex-direction이 row일 때 기준 -> 세로 관리)
- stretch (기본): 세로 영역을 꽉 채움
- flex-start: 여백을 없애고 세로 맨 위에 둠
- flex-end: 여백을 없애고 세로 맨 아래에 둠
- center: 여백을 없애고 가운데에 둠
- baseline: 기준점을 잡아서 둠
flex-wrap
아이템이 컨테이너를 넘어섰을 때 어떻게 처리할지 결정함
기본값은 nowrap으로 부모의 크기를 기준으로 자식들이 알아서 공간을 나눠서 나열함 (줄바꿈 X)
많은 상품을 보여줘야 할 때 flex-wrap: wrap을 설정하면 공간이 부족할 경우 자동으로 줄바꿈을 함
flex-basis
자식의 최소 너비를 설정할 때 사용
기본 값은 auto
flex-grow
Container에 여백이 생겼을 때 아이템이 어떻게 영역을 차지할지 설정함. 다른 아이템들과 비교해서 해당 비율로 여백을 가져감
기본 값은 0
flex-shrink
Container가 자식들이 차지하는 공간보다 줄어들었을 때 너비를 어떤 비율로 줄일지 정함
다른 아이템들과 비교해서 해당 비율로 줄어들게 됨
기본 값은 1이고, 이것은 계산이 복잡해서 잘 사용하지는 않음
flex
flex로 flex-basis, flex-grow, flex-shrink를 한 번에 쓸 수 있다.
flex: 증가너비 감소너비 기본너비
반응형'공부 > etc' 카테고리의 다른 글
[html2pdf, Java] HTML을 PDF로 변환해주는 오픈소스 (1) 2022.10.13 [ChromeDriver] close(), quit() 차이 (2) 2022.10.03 [WebDriverManger] 웹 버전에 맞는 웹 드라이버를 자동 설치해주는 오픈소스 (0) 2022.10.03 [FE] 부트스트랩 없이 왼쪽으로 펼쳐지는 드롭다운 메뉴 만들기 (3) 2022.09.12 [MySQL] RSA public key is not available client side (option serverRsaPublicKeyFile not set) (0) 2022.08.23