$$config title: [임베디드 풀스택] HTML과 CSS keywords: - IT - 풀스택 $$ # 태그와 엘리먼트란 ### 태그 (tag) ```html 태그 란 즉 "<"와 ">"로 묶인 명령어 태그에는 세가지 종류가 있습니다. 시작태그 : 종료태그 : 빈태그 :
,

, 등 #태그의 구성 시작태그는 "속성(attribute)"과 "값(value)"을 가질 수 있습니다. 위에서 시작태그는 속성과 값을 가지고 있는데 "href"는 속성이라고 하며 "http://opentutorials.org"를 값이라고 합니다. ``` ### 엘리먼트 element 다음과 같이 생긴것들을 엘리먼트라고 합니다. ```html

이것은 문단입니다.

오픈튜토리얼스 즉 내용을 포함해 시작태그와 종료태그까지를 엘리먼트라고 합니다. 또 이런것도 엘리먼트입니다.
빈요소(empty element)라고 하여 내용이 없는 경우를 말하며

, 와 같은 것들이 있습니다. ``` # 엘리먼트에 스타일 적용 ```html 안녕하세요. 저는 곽태욱입니다.(글씨를 지우면 css에 컬러,백그라운드 컬러가 지정되어도 출력이안된다.) ``` ```css subject{ color: red;(글씨체에 색을 정할수있다) background-color: black;(글씨 배경색을 정할수있다) } ``` $$codepen https://codepen.io/kwaktaewook/embed/ZExLWzQ?default-tab=html%2Cresult&editable=true $$ ----- 사각형 성질 ---- ```html

``` ```css color: red; background-color: black; width: 100px; (넓이)>> 높이만있고 넓이를 없애면 끝까지 늘어남 height: 100px; (높이)>>넓이만 있고 높이를 없애면 사각형출력 x ``` $$codepen https://codepen.io/kwaktaewook/embed/ZExLWyB?default-tab=html%2Cresult&editable=true $$ ```html

안녕

``` ```css div{ background-color: pink; display: block;(디스플레이의 기본값은 블록이다. 이 경우 바탕값이 늘어진다.) } nav{ background-color: red; (display: inline-block; 은 글씨바탕에 알맞게 적용된다.) } ``` - 또한 div와 nav의 디스플레이값이 둘다 block; 일경우 글씨가 줄바꿈이되며 각자 엘리먼트가 적용된다. - div 와 nav의 디스플레이값이 inline-block; 일경우 글씨가 한칸 띄어진 상태로 각자 엘리먼트가 적용된다 $$codepen https://codepen.io/kwaktaewook/embed/VwXPaxE?default-tab=html%2Cresult&editable=true $$ 개념확인 ---- - block - 너비 : 너비가 지정되어 있지 않으면, 최대한 늘어난다.다. - 높이 : 높이가 지정되어 있지 않으면, 최소로 줄어든다. - 배열방향 : 한줄에 무조건 1개 - inline-block - 너비 : 너비가 지정되어 있지 않으면, 최소한 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소로 줄어든다. - 배열방향 : 한줄에 최대한 여러개 ```html

개념 놀이터, 재료

width
height
display:block
display:inline-block

``` ```css div, section, nav { display: inline-block; font-size:3rem; }`서식이 지정되어도 추후에 재선언으로 그값으로 출력` div { background-color:red; width:100px; height:auto; } section { background-color:gold; width:100px; height:100px; } nav { background-color:blue; width:100px;(기본값 auto) height:100px;(기본값 auto) } ``` $$codepen https://codepen.io/kwaktaewook/embed/MWVbeXz?default-tab=html%2Cresult&editable=true $$ #문제 : section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요. ---- ```html

문제 : section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.

``` ```css div { height:100px; background-color:red; } section { height:100px; background-color:green; width:50%; display: inline-block; } article { height:100px; background-color:blue; width: 49.7%; display: inline-block; } ``` ---- 1. width 로 넓이를 설정을해준다. 2. display에 inline-block을 설정해서 같은줄로 설정해준다. $$codepen https://codepen.io/kwaktaewook/embed/VwXmjBa?default-tab=html%2Cresult&editable=true $$ #글자 꾸미기 ---- ```html

안녕

``` ```css div { font-size: 3rem; font-weight: normal; letter-spacing: -10px; color: #33ffff; } section { font-weight:bold; letter-spacing:-10px;/*자간*/ font-size:3rem;/*글씨크기*/ /* rgba 함수의 인자 인자 1(red) : 0 ~ 255 까지 넣어서 실험 인자 2(green) : 0 ~ 255 까지 넣어서 실험 인자 3(blue) : 0 ~ 255 까지 넣어서 실험 인자 4(alpha, 투명도) : 0 ~ 1 까지 넣어서 실험 */ color:rgba(255,0,255,0.5); } ``` #헥스 색상표 ---- 헥스색상표..png

#헥스 색상표를 확인하여 아래에 CSS를 수정하여 글씨색을 바꾸어 보세요. $$codepen https://codepen.io/kwaktaewook/embed/gOegNJL?default-tab=html%2Cresult&editable=true $$ #Emmet (에밋),(젠코딩) ---- 에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다 에밋을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다. 자세한 에밋사용법은 잘정리되있는 블로그를 링크함 [-?-Emmet-문법-정리 ?‍? Dev Scroll:티스토리](https://inpa.tistory.com/entry/HTML-%F0%9F%8E%A8-Emmet-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC) table>tr*2>td*3[탭키] 총 엘리먼트 개수 : 9개(table 1개, tr 2개, td 6개) table의 자식 엘리먼트 개수 : 2개 table의 후손 엘리먼트 개수 : 8개 ```html

``` HDML 표만들기 ---- ```html

월 1교시 국어

월 2교시 영어

화 1교시 수학

화 2교시 국사

수 1교시 일본어

수 2교시 음악

#(th)글씨체 굵게,가운데정렬

교시 / 요일	월	화	수
1교시	국어	수학	일본어
2교시	영어	국사	음악

``` ```css table td{ text-align: center; }//가운데정렬 table{ border-collapse: collapse; }//표 실선으로 바꿈 ``` $$codepen https://codepen.io/kwaktaewook/embed/zYWNgvX?default-tab=html%2Cresult&editable=true $$ # Display 속성표 | display | 너비 | 높이 | 한줄 혼자 사용 | | -- | -- | -- | -- | | Block | 지정되지 않으면, 최대한 커진다. | 지정되지 않으면, 최소한으로 줄어든다. | 혼자사용(세로롤 나열) | inline-block | 지정되지 않으면, 최소한으로 줄어든다. | 지정되지 않으면, 최소한으로 줄어든다. | 최대한 여럿이(가로로 나열됨) ##알아낸사실 알아낸 사실 - div, section, nav, article의 display 속성 기본값은 block 이다. - div, section, nav, article의 width 속성 기본값은 auto 이다. - div, section, nav, article의 height 속성 기본값은 auto 이다 # 링크걸기 ```html a[TAB]을 누르면 자동으로 완성이된다. 글씨 를 쓰면 글씨에 하이퍼링크가 생긴다. EX)구글 구글 또 target="_blank"를 추가하면 링크시 새창으로 띄워진다. ``` $$codepen https://codepen.io/kwaktaewook/embed/poLRMGm?default-tab=html%2Cresult&editable=true $$ # 자식선택자 ```html

네이버

``` ```css div a{ font-size: 3rem; color: black; } div a는 div에 자손 후손 대손 손손손 다 정의를 하겟다는의미 nav > a { font-size: 5rem; color: darkblue; } nav > a 는 자손에게만 정의를함 후손에게만 정의를 하고싶은경우 div > 자손 > a 로 지정정의가 가능하다. 당연히 자손에 a가 많을경우 같이 적용 section > a { font-size: 2rem; color: green; } ``` $$codepen https://codepen.io/kwaktaewook/embed/JjLWPNy?default-tab=html%2Cresult&editable=true $$ # 색상과 정렬상태가 다른 링크! ---- ```html

bnx 사이트

구글

``` ```css div{ text-align: right; }> 여기에 컬러와 폰트를 지정해도 반영x div a{ color: black; font-size:2rem; }>링크 즉 자손에 서식값을 넣음 nav{ text-align: center; } nav a{ color: green; font-size:3rem; } section{ text-align: left; } section a{ color: blue; font-size:5rem; } ``` $$codepen https://codepen.io/kwaktaewook/embed/zYWZORw?default-tab=html%2Cresult&editable=true $$ # 사각형 문제 ```html

``` ```css div{ display: inline-block; width:100px; height:100px; background-color: red; } div:hover{ background-color: blue; } Hover 를 넣으면 마우스 커서가 올라가면 설정한 색으로 바뀜 ``` $$codepen https://codepen.io/kwaktaewook/embed/zYWZEEo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 인접 선택자 ```html

``` ```css div{ background-color: blue; } section > div + div{ background-color: red; }/ 인접 선택자 ``` $$codepen https://codepen.io/kwaktaewook/embed/QWmpOLy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 텍스트 밑줄(text deocration) ```html

테스트

/#은 링크 테스트용으로 씀 ``` ```css a{ color: green; text-decoration: none;/*밑줄지우기/* } ``` $$codepen https://codepen.io/kwaktaewook/embed/MWVpEGy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 상단바 만들기 ---- ```html BMX │ 　BRAND　 │ 　VISUAL　 │ 　STYLE　 │ 　MECLA　 │ 　NEWS　 │ 　STCRE　 │ 　CUSTOMER　 │ 혹자는 (띄워쓰기 코드)를 쓰면 코드 보기가 어려워 ㄱ+한자 1번에 공백을 씀. 에지간하면 &nvsp; 권장 ``` ```css a{ text-align: center; font-size: 3rem; color: black; font-weight: bold; text-decoration: none; display: block; } body{ font-size: 1rem; text-align: center; font-weight: bold; } ``` $$codepen https://codepen.io/kwaktaewook/embed/qBorPzo?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 상단바 만들기 안쓰는방법 ```html

BMX

``` ```css div{ text-align:center;/*가운데 정렬*/ letter-spacing:-0.4rem;/*자간*/ font-weight:bold; /*폰트 굵기*/ font-size:7rem; /*폰트 사이즈*/ } a { color:black; text-decoration: none;/*밑줄없애기*/ display: block;/*블록가로로 확장*/ } nav { text-align: center;/*폰트 정렬*/ font-weight: bold; /*폰트 굵기*/ } nav > section { display: inline-block;/*들여쓰기*/ width: 40px;/*넓이*/ } ``` $$codepen https://codepen.io/kwaktaewook/embed/PoRpOQP?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 3x2 가운데 정렬 배열 ```html

``` ## margin을 이용한 방법 ```css dd> img{ width:400px; margin: 15px 15px; border: red solid 3px; } dd{ text-align: center; } ``` $$codepen https://codepen.io/kwaktaewook/embed/wvmdxwb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ ## padding을 이용한 방법 ```css dd> img{ width:400px; padding:30px; border: red solid 3px; } dd{ text-align: center; } ``` $$codepen https://codepen.io/kwaktaewook/embed/NWYjBWQ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 이미지 태그 ```html img쓰고 [TAB]을 누르면 써밋으로 자동완성된다. src= "이미지의 주소값을 여기 입력한다."

그러면 다음과같이 그림으로 출력이 된다. ```

---- # 테스트용 텍스트와 사진 ```html html에 lorem[tab]을 누르면 의미없는 텍스트가 길게 생긴다. 이것으로 테스트하며, 이미지 태그시

를 입력하면 의미없는 사진이 하나 생긴다. ```

- object fit -사진 크기에 조절되면서 사이즈가 줄거나 커짐 -object fit: contain - 사이즈사각형안에 사진을 끼워맞춤 -object fit: fill - 기본값 사진을 쭉쭉늘리면서 사이즈에 맞춤 -object fit: cover - 사진이 사이즈에 맞춤 # nth child, nth last child, first child, last child 1. :nth-child(N)= 부모안에 모든 요소 중 N번째 요소 2. A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소 3. :first-child= 부모안에 모든 요소 중 첫번째 요소 4. :last-child= 부모안에 모든 요소 중 마지막 요소 5. A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소 6. A:last-of-type= 부모안에 A라는 요소 중 마지막 요소 ----

# block요소의 가로정렬 ```html

``` ```css div{ width:100px; /가로 100픽셀 height:100px; /높이100픽셀 margin-left:0;/*마징 레프트는 기본값이 0이라 쓸필요없다.*/ background-color:red;//블록 색 빨강 } div:nth-child(2){ /nth-child(2)= div의 2번째자손 background-color:gold;/색상 골드 margin: 0 auto; /마징/상하/좌우 = 상하는 기본값 좌우는 50% } div:nth-child(3){ /nth-child(3) 3번째자손 background-color:blue;; /블럭 색 파랑 margin-left:auto; /마징 레프트= '0' 이면 왼쪽 'auto;' , '100%'면 오른쪽 } section{ 부모요소 border: 5px dotted gray; /테두리/굵기/선옵션/색상 } ``` $$codepen https://codepen.io/kwaktaewook/embed/ZExJyPL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 태그< ID > ```html 태그에

test

를 명해주면 div중에 아이디만 들어간 요소만 지정해서 만들수있다. 단 똑같은div태그에 id가 중복이 안된다. EX)

데브

```css div { color: blue; } #dev { color: red; } ``` $$codepen https://codepen.io/kwaktaewook/embed/dymVbPb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 태그< Class > ```html 태그에

사람

pi라는 클라스를 만들수있다. id와 마찬가지로 사용되는데 다른점은 중복되는

들과 중복선언이 가능하다는점이다. 또한

이런식으로 클라스들 두개다 해당되는 요소만 지정가능하다 ``` --- ```html

축구하기

test

``` ```css div{ /div 전체 적용 width:200px; /넓이 height:100px; /높이 border:1px solid red; /테두리 } #second { color:blue; /글씨 색 font-size:3rem; /폰트사이즈 } .active.active2 { /액티브 액티브2 둘다 가지고있으면 적용 background-color:green; /블럭 색상 font-size:3rem; text-decoration: line-through; } .active { /액티브 클라스만 적용 background-color:blue; font-size:2rem; color:yellow; } ``` $$codepen https://codepen.io/kwaktaewook/embed/bGvobGq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ #border-radius(둥근사각형) ```html

``` ```css div{ width:100px; 넓이 height:100px; 높이 background-color:red; /블럭색상 margin: 10px; /블럭간격 띄움 } #first { border-radius: 10px 20px 30px 40px; /11시 2시 5시 7시 방향으로 적용 } #pp{ border-radius: 10px 20px; /11시5시 2시7시 각각적용 } #pi{ border-radius: 10%;/*넓이의 10% 50%면 원*/ background-color: #ff0fff; /블럭 색상 } ``` $$codepen https://codepen.io/kwaktaewook/embed/PoRJYmp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 슬라이더 페이지 버튼구현 ```html ``` ```css body{ /바탕색 번경 background-color:black; } nav{ /부모요소 text-align:center; /블록 가운데정렬 } nav:nth-child(2){ /부모요소중 2번째 margin-top:50px; /위에서 50px 밑으로 내림 } nav>div{ width:20px; height:20px; background-color:grey; display:inline-block; /인라이드 블록으로 가로로 정렬 } nav:nth-child(2)>div{ nav의 2번쨰요소에 div를 border-radius:50%; /동그랗게 만듬 } nav>div:hover{ /마우스로 가져다 대면 background-color:white;/ 색상변경 } nav>div:first-child { div의 가장 처음요소 background-color:white; /색상 흰색 } ``` $$codepen https://codepen.io/kwaktaewook/embed/LYdzPqN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # inherit과 a엘리먼트 노멀라이즈 ```html a 엘리먼트를 쓰면 파란색글씨와 밑줄이 기본으로 깔려있다. 상위 태그에서 지정한 서식들이 적용이 안되며 따로 div>a로 지정을해줘야한다. 하지만 color는 div에 적용을하면 자식요소에도 적용이된다. 이렇게 적용이되는 애들 기본값이 inherit이라는 유전(?) 값이라 그렇다 a 엘리먼트에 color: inherit을 적용하면 부모컬러를 버꿔도 잘바뀐다 ``` ### 노멀라이징은 HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS 파일 # body 노멀라이징 ```html ``` ```css body{ margin:0; 해준다. } ``` # ul li 노멀라이징 ```html

요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현됩니다. ``` 노멀라이징하려면 ```css list-style:none; margin:0; padding:0; ``` # H태그 노멀라이징 ```html HTML은 문서의 논리 구조를 전달하는 데 적합한 문법을 가지고 있습니다. 그 중에서도 페이지의 1레벨 표제주제와 그에 속하는 하위 레벨 표제의 구조를 단계적으로 표현해주는 것이
〜
tag입니다. ``` ```html
h1

h2

h3

h4

h5

h6
``` ```css h1, h2, h3, h4, h5, h6 { font-size: inherit; margin:0; padding:0; } ``` # ul li를 이용한 메뉴바구성 ```html
``` ```css ul, li { margin:0; padding:0; list-style:none; } a{ color:inherit; text-decoration: none; } ----------------------여기까지 노멀라이징 nav{ text-align:center; /바탕블록까지 가운데 정렬 nav>ul에넣으면 안에 텍스트만 정렬 } nav>ul{ background-color:#dfdfdf; /블록박스 색상 display:inline-block; /블럭박스 길이지정 padding:0 20px; /블록박스 옆으로 살짝 늘림 border-radius: 10px; /둥근사각형으로 만듬 } nav>ul>li { width:120px; display: inline-block; /아이템 텍스트 가로로 정렬(세로로블록처럼쌓여있었음) } nav>ul>li>a{ padding:10px; /블럭 안쪽으로 10px 넓힘(디스플레이 블럭해야 넓어짐 display:block; /디스플레이 블럭 } nav>ul>li>a:hover{/ 반전됫을때 포인터가 위로올라가면 display:block; background-color:black;/색상 블랙 color:white; /글씨색 흰색 padding:10px; } ``` $$codepen https://codepen.io/kwaktaewook/embed/JjLroGL?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # 메뉴바 접혓다 펼쳐졋다 ```html 버튼
안녕

잘가

사랑해
``` ```css a ~ div { / div전체 적용 display:none; } a:hover ~ div{/div 전체 적용 display: block } a + div { /+는 a에 인접동생만 적용 display:none; } a:hover + div{ /+는 a에 인접동생만 적용 display: block } ``` $$codepen https://codepen.io/kwaktaewook/embed/gOeGbgN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # inline block으로 그리드 만들기 ```html

kk

``` ```css section> *{ font-size:1rem; /세션 빼고 모두 1rem포인트 글씨가 나오게끔 해준다. } section { width:200px; height:200px; border:10px solid red; 주위 실선 font-size:0; /폰트사이즈 0을 안하면 div의 넓이를 50%설정을 못한다. } section > div{ >>section을 d1이나 이상한태그로 만들면 인라인블럭이안먹힌다. width:50%; //49%로설정하면 되기는 하지만 50프로입력하면 폰트사이즈의 여백으로인해 inline-block; 이 안먹히게 된다 그로인해 세션에 폰트사이즈 0으로 해준다. height:50%; background-color:black; display:inline-block; vertical-align: top; /블럭안에 텍스트가 들어가면 블럭이 깨져서 튀어나온다. 나온블록 정렬 } div:first-child{ background-color:black; } div:nth-child(2){ background-color:green; } div:nth-child(3){ background-color:pink; } div:nth-child(4){ background-color:gold; } ``` $$codepen https://codepen.io/kwaktaewook/embed/MWVEOQW?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" $$ # inline-gird (그리드만들기 2번쨰) ```html

아이템1

아이템2

아이템3

아이템4

아이템5

아이템6

아이템7

아이템8

아이템9

아이템10

아이템11

아이템12

아이템13

아이템14

``` ```css body{ margin:0; } .inline-grid{ border:10px solid red; /테두리작업 height:500px; /테두리 높이 font-size:0; /폰트사이즈여백 없애기 } .inline-grid>*{ 인라인골드만뺴고 전체 폰트사이즈 1rem;적용 font-size:1rem; } .inline-grid>div{ width: calc(100%/ 7); /calc 계산기 (100% / 7) 가로로 7개만큼 나눠라 height:50%; /높이 50% display:inline-block; } .inline-grid>div:nth-child(2n){ /div의 2번째마다 적용시킴 background-color:black; /바탕색 검은색과 color:white; /글씨색 하얀색으로 } ``` $$codepen https://codepen.io/kwaktaewook/embed/qBoPYJJ?default-tab=html%2Cresult&editable=true" $$ ```html

가로 6칸중에 1칸

가로 6칸중에 3칸

가로 6칸중에 2칸

``` ```css body { 노멀라이징 margin: 0; padding: 0; } .inline-grid > * {부모클라스만빼고 font-size: 1rem; /폰트 1rem display: inline-block; } .inline-grid { 부모 클라스 border: 10px solid red; /테두리 빨강색 height: 600px; /높이 font-size: 0; /폰트사이즈 여백 제거 vertical-align: top; 수직 정렬을 지정합니다. } .inline-grid > div {색상 높이 height: 50%; } .w-1\/6{ width: calc(100% / 6 * 1); =>6칸 중에 1칸 } .w-2\/6{ width: calc(100% / 6 * 2); =>6칸 중에 2칸 } .w-3\/6{ width: calc(100% / 6 * 3); =>6칸 중에 3칸 } .w-4\/6{ width: calc(100% / 6 * 4); =>6칸 중에 4칸 } .w-5\/6{ width: calc(100% / 6 * 5); =>6칸 중에 5칸 } .w-6\/6{ width: calc(100% / 6 * 6); =>6칸 중에 6칸 } /*내 설정*/ .box-1 > div:nth-child(1) { /부모요소클라스 >div 요소중 1번째 background-color: red; } .box-1 > div:nth-child(2) {/부모요소클라스 >div 요소중 2번째 background-color: orange; } .box-1 > div:nth-child(3){ /부모요소클라스 >div 요소중 3번째 background-color: gold;} .box-1 > div:nth-child(4){ /부모요소클라스 >div 요소중 4번째 background-color: green; } .box-1 > div:nth-child(5){ /부모요소클라스 >div 요소중 5번째 background-color: blue; } .box-1 > div:nth-child(6){ /부모요소클라스 >div 요소중 6번째 background-color: violet; } .box-1 > div:nth-child(7){ /부모요소클라스 >div 요소중 7번째 background-color: purple; } ``` $$codepen https://codepen.io/kwaktaewook/embed/NWYazMw?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" $$

개념 놀이터, 재료

문제 : section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.

〜

tag입니다. ``` ```html

h1

h2

h3

h4

h5

h6