1. HTML 문서의 구조
<html>: 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다.
<head>: 아직 여러분이 사용하지는 않겠지만, 주로 외부 소스를 참조해야할때 사용하곤 합니다.
<body>: 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다.
<> : 태그 (<p>, <br> 등 꺽쇠 안에 들어가는 모든 것)
<> </> : 요소 (element) (꺽쇠 페어. <p> </p> , <head> </head> 등)
attribute(속성) : src 등 추가적인 정보를 전달해주는 것 (<img src=""> , <a href=""></a>)
2. href (hypertext reference)
<a href="mailto:abc@abc.com"></a> <-- 이메일 보내는 프로그램으로 연결시켜주는 링크
<a href="tel:010-1234-5678"></a> <-- 누르면 전화 거는 링크
3. 경로
상대경로 : 같은 파일 시스템 구조 상의 위치 (index.html, ../static/style.css 등)
절대경로 : 전체 인터넷 기준으로 해당 자료 위치 (도메인 주소. http://solutionbook.shop)
4. CSS selector (선택자)
- type : 태그 종류를 지정해 꾸밀 수 있다. 지정한 태그 종류에 해당하는 모든 요소들은 설정한 스타일대로 적용됨
- class : 클래스 지정해서 요소들 꾸며줄 수도 있다. 클래스는 .를 적어주기. 하나의 요소에 여러개의 클래스를 줄 수도, 하나의 클래스를 여러개의 요소에 사용할 수도 있다.
- id : id는 #를 붙여서 사용하기. 하나의 id는 하나의 요소에만 적용되어야 함.
- compound : 여러개의 선택자를 동시에 나열하는 방식. 쉼표로 구분. (h1, h2, #box {})
- descendent : 한칸 띄워서 사용. 특정 요소의 하위 요소 선택할 때 사용된다. (#nav li {})
- child : > 로 사용. 특정 요소의 직속 자식요소만 선택. (#nav > li {})
- universal : * (sub heading에도 적용)
- attribute : img[alt="cat"] {} < img 태그 중 alt 속성이 "cat"인 요소들만 선택. alt 이외 속성도 사용 가능.
5. block, inline
대표적인 block 요소 : div, p
div = division (또는 section)
p = paragraph
대표적인 inline 요소 : span
6. positioning
- display: flex; -> css의 flex 속성을 이용하는 것. flex 속성 적용하기 전엔 block 요소의 흐름대로 나열되는데, flex를 적용하면 위/아래가 아닌 옆으로 나란히 배치된다.
- display: inline-block; -> block 요소들을 inline처럼 배열하는 것.
- position property 사용.
1) position: relative; -> top, right, bottom, left 등의 값을 지정하면 위치가 조정됨. 그 외엔 별다른 특이점 없음.
2) position: absolute; -> 가장 가까운 부모 요소 중 position: relative; 가 적용된 요소를 찾아 그 요소를 기준으로 위치가 잡히게 됨. 만약 부모 요소 중 position: relative; 를 가진 요소가 없을 경우 전체 페이지를 기준으로 위치가 잡히게 됨.
'스파르타코딩클럽 > 내일배움단' 카테고리의 다른 글
| 공부한 것들 (0) | 2022.01.11 |
|---|---|
| 앱개발 종합반 1주차 (0) | 2022.01.03 |
| 내일배움단 프로젝트 챌린지 최종 점검 (0) | 2021.12.13 |
| 내일배움단 메이킹챌린지 개인적인 후기 (0) | 2021.12.08 |
| 내일배움단 메이킹챌린지 개발일지 (0) | 2021.12.08 |