$$config title: 수업 초안 keywords: - IT $$ ```html ``` # 초안 ```html 복습 ``` ```html vscode로 HTML문서 구조 확인 codepen에는 생략 ``` ```html 태그가 눈에 보이기위한 3가지 조건 1.너비 2.높이 3.배경색 ``` ## 상위엘리먼트와 하위엘리먼트를 부르는 명칭 - 김이홍 강사님 수업자료 : [코드펜 이동하기](https://codepen.io/jangka44/pen/bQqbpZ?editors=1000)
- 김혜지 수업자료 : [코드펜 이동하기](https://codepen.io/kimhyeji324/pen/qByerLW?editors=1000) ```html 나를 감싸는 엘리먼트 : 부모 엘리먼트 내가 감싸는 엘리먼트 : 자식 엘리먼트 같은 부모를 둔 엘리먼트 : 형제 엘리먼트 조상엘리먼트 부모엘리먼트 자식엘리먼트 후손엘리먼트 형제엘리먼트 인접동생엘리먼트 ```
## 배경색 속성 ```html 배경색을 커스텀하는 속성 : background-color ```
## 컬러값으로 들어올 수 있는 속성값 ```html 1. 색상이름 ex) red, green 2. rgba ex) rgba(255, 0, 0, 0.1) rgba(red, green, blue, 투명도) 투명도 : 0 ~ 1 10% : 0.1 50% : 0.5 100% : 1 rgba만 투명도를 조절할 수 있다. 3. hax ex)#ff0000 6자리가 같으면 3자리로 생략할 수 있다. ex) #000000 → #000 ```
## 높이속성 ```html [높이속성] 높이속성 ▶ height 사용 할 수 있는 단위 ▶px(고정형 단위), (%, vh, vw) 사용 할 수 있는 수치 ▶ auto, 0 ~ n ``` ```html [높이속성 기본값] 기본값 ▶auto ``` ```html [height: auto] 하위엘리먼트들 중 수치가 없다면 기본값인 auto는 0으로 작동한다. 하위엘리먼트들 중 수치가 있다면 기본값인 auto는 하위엘리먼트 수치만큼 작동한다. 상위엘리먼트에 수치가 없어도, 있어도 기본값인 auto는 상위엘리먼트 수치를 상속받을 수 없다. ```
## 넓이속성 ```html [넓이속성] 넓이속성 ▶ width 사용 할 수 있는 단위 ▶px(고정형 단위), (%, vh, vw) 사용 할 수 있는 수치 ▶ auto, 0 ~ n ``` ```html [넓이속성 기본값] 기본값 ▶auto ``` ```html [width: auto] 높이 속성과는 다르게 display에 따라 결과값이 다르다. ``` ```html ＊block width : auto auto = 100% ＊inline width : auto auto = 0 ＊inline-block width : auto auto = 0 ``` ```html 하위엘리먼트에 수치값이 없을때(block) ▶ 기본값인 auto는 상위엘리먼트 수치만큼 작동한다. 하위엘리먼트에 수치값이 없을때(inline) ▶ 기본값인 auto는 0으로 작동한다. 하위엘리먼트에 수치값이 없을때(inline-block) ▶ 기본값인 auto는 0으로 작동한다. 하위엘리먼트에 수치값이 있을때(block) ▶ 기본값인 auto는 상위엘리먼트 수치만큼 작동한다. 하위엘리먼트에 수치값이 있을때(inline) ▶ 기본값인 auto는 하위엘리먼트 수치만큼 작동한다. 하위엘리먼트에 수치값이 있을때(inline-block) ▶ 기본값인 auto는 하위엘리먼트 수치만큼 작동한다. ```
## body 넓이와 높이 - 김혜지 수업자료 : [body태그에 배경색 적용](https://codepen.io/kimhyeji324/pen/eYjqxeq?editors=1100) ```html 1. 화면에 나오기 위해서는 3가지 요소가 필요하다. - 넓이 - 높이 - 배경색 2. body태그에 넓이, 높이를 커스텀하지 않았음에도 불구하고 사용자가 볼 수 있는 화면에 나오고 있다. 그렇다는건 body태그는 기본적으로 넓이, 높이를 가지고 있다는 것이다. 3. ctrl + 휠로 화면을 작게 만들었을때 배경색이 끝까지 채워지는것을 보아 body태그는 화면넓이만큼 크기를 가지고 있다는 것을 알 수 있다. 4. body 크기를 상속받는 태그들은 전부 화면 크기만큼 가지게된다. ```
## block ```html [김이홍 강사님 수업자료] 너비 100%가 기본 속성, 한 줄에 하나만 배치 가능, 너비 높이 미지정시에 내용물의 높이만큼 가로 100%로 나온다. 높이만 지정해도 배경이 나오며 너비 높이를 지정할 시에는 내용물이 넘쳐도 너비나 높이는 변하지 않는다. ex) div, section, nav, article 등 ``` ```html [김혜지 수업자료] 1. 기본적으로 넓이를 가지고있다. 2. 상위엘리먼트를 기준으로 넓이를 가진다. 3. 기본적으로 넓이를 가지고 있기 때문에 높이만 생겨도 형태를 확인할 수 있다. 4. width : auto 일때 100%값으로 작용한다. 5. 한줄을 전부 차지한다. 6. 넓이가 작아도 한줄을 전부 차지한다. 7. a, span, img, ::befor, ::after 제외 전부 block태그이다. 8. block태그를 한줄에 같이 나오게 하려면 다른 display 속성값으로 바꿔줘야한다. ```
## inline ```html [김이홍 강사님 수업자료] 너비, 높이 지정 불가! 인라인 성분으로 다른 속성을 감싸는것은 안된다, 패딩-top 이 안되고(absolute 걸면 된다) 마진 상하가 먹지 않는다. ex) span, a, img, text 등 ``` ```html [김혜지 수업자료] 1. 기본적으로 넓이를 가지고있지 않다. 2. 상위엘리먼트 넓이를 가지지않는다. 3. 기본적으로 넓이, 높이 전부 가지고있지 않아서 넓이, 높이를 적용 해야하지만 형태를 확인할 수 있다. 5. width : auto 일때 0값으로 작용한다. 6. 한줄에 같이 나온다. 7. 넓이가 크면, 즉 부모엘리먼트보다 넓이가 넓어지면 줄바꿈된다.(inline태그가 2개 이상일때) 8. inline태그는 넓이, 높이, 마진, 패딩 등.. 다양한 코드가 안먹는다. 9. inlien태그를 커스텀하고 싶을경우 다른 display 속성값으로 바꿔줘야한다. 10. inline태그는 a, span, img, ::befor, ::after가 있다. ```
## inline-block - 김혜지 수업자료 : [예제와 노트정리 코드펜 이동](https://codepen.io/kimhyeji324/pen/MWBNLRg?editors=1000) ```html [김이홍 강사님 수업자료] 블락과 인라인 둘의 성분을 합친 녀석. 가로 성분이 블럭처럼 100%가 아니다. 한줄에 여러개 나올 수 있다, 내용물 높이와 너비에 자동으로 맞춰지고 내용물이 없을 시 너비, 높이 둘 다 지정해야 나온다. 인라인 성분으로 감쌀 시에 넘치는 높이는 감싸지 않는다. ``` ```html [김혜지 수업자료] 1. inline-block을 적용하면 태그끼리 여백이 생긴다. 2. inline-block인 태그는 없다. (inline-block으로 태어난 태그는 없다.) 3. 여백값은 측정할 수 없다. 4. 넓이를 상속받지 않는다. 5. width: auto = 0 ```
```html div 태그 ``` ## css선택자 - 김이홍 강사님 수업자료 : [코드펜 이동](https://codepen.io/kimleehong/pen/WNMPJRO?editors=1100)
- 김혜지 수업자료 : [자식선택자](https://codepen.io/kimhyeji324/pen/eYjqXVg?editors=1100) - 김혜지 수업자료 : [후손선택자](https://codepen.io/kimhyeji324/pen/XWBvGpN?editors=1100) - 김혜지 수업자료 : [인접동생선택자](https://codepen.io/kimhyeji324/pen/abjeMJw) - 김혜지 수업자료 : [전체선택자](https://codepen.io/kimhyeji324/pen/LYBwaye)
## 자식엘리먼트와 부모엘리먼트 높이 - 김혜지 수업자료 : [부모 높이 auto](htts://codepen.io/kimhyeji324/pen/rNrXRJy?editors=1100) ```html 부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. ``` - 김혜지 수업자료 : [부모 높이 > 자식높이](https://codepen.io/kimhyeji324/pen/dyjxrEQ?editors=1100) ```html 1.부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. 2.부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. 3.부모와 자식 중 부모엘리먼트는 밑에 깔리고 자식 엘리먼트가 위에 올라온다. 4.부모와 자식 크기가 같을경우 자식크기에 가려져서 부모가 보이지않는다. 5.자식보다 부모가 더 클 경우 자식은 상단과 왼쪽에 딱 붙은 형태로 나온다. ``` - 김혜지 수업자료 : [부모 높이 < 자식높이](https://codepen.io/kimhyeji324/pen/XWBvGZR?editors=1100) ```html 1.부모엘리먼트가 높이값이 ★auto일때★ 자식 높이만큼 커진다. 2.부모와 자식 중 부모엘리먼트는 밑에 깔리고 자식 엘리먼트가 위에 올라온다. 3.부모와 자식 크기가 같을경우 자식크기에 가려져서 부모가 보이지않는다. 4.자식보다 부모가 더 클 경우 자식은 상단과 왼쪽에 딱 붙은 형태로 나온다. 5.자식보다 부모가 더 작을 경우 자식이 부모를 뚫고 나오게된다. 6.좋은형태 : 자식 크기를 키워서 부모 크기를 키우는것이 가장 좋다. ```
## 자식엘리먼트와 부모엘리먼트 크기가 같을때 - 김혜지 수업자료 : [부모 높이 = 자식높이](https://codepen.io/kimhyeji324/pen/RwYboyg?editors=1100) ```html 1.부모엘리먼트크기 = 자식엘리먼트크기 2.부모가 밑에 깔리고, 자식이 위에 올라오면서 부모 형태는 확인 할 수 없다. 3.위 상황에서 부모엘리먼트를 커스텀하면 눈으로 확인할 수 없다. ```

게시글 상세