`` ## width 와 height의 차이 - width의 auto 값은 최대치이다. - height의 auto 값은 최소치이다 . ## 중요!!!! display 속성정리 - ![display 속성정리](https://i.imgur.com/oHogR4l.png) ### EX $$codepen https://codepen.io/jangka44/embed/WKQRGW?default-tab=html%2Cresult&editable=true $$ - section article은 block이기 때문에 display를 inline-block으로 놓아줘야 한줄에 여러개가 배치될 수 있다! ## 글자 꾸미기 $$codepen https://codepen.io/shinashoba/embed/zYRNqgB?default-tab=html%2Cresult&editable=true $$ ````html

글자와 같은 성격을 가진 글자태그(inline)

글자를 꾸며주는 태그들!

경고, 주의사항과 같이 중요한 내용들을 강조할 때! 글자를 굵게 표현하고 싶을 때!

주위 텍스트에 비해서 강조된 부분이나 저자의 생각 ~ 강조! 이탤릭체를 표현하고 싶을 때!

인용할 문구를 표현, 따옴표가 나타남! 글자와 같이 나열되어지며 짧은 부분의 인용을 표현할 때 사용! 인용할 문구를 표현, 따옴표가 나타남! 글자와 같이 나열되어지며 짧은 부분의 인용을 표현할 때 사용!

중요한 부분을 강조할 때! ~ 사용 >> 형관펜으로 줄을 그은 것처럼 노란 배경색이 나타남!

글자를 꾸밀 때 사용 합니다!

韓國 (한국)

~~문서에서 삭제된 텍스트나 지워야 할 부분 강조!~~

문서에 나타난 텍스트에 강조하거나 밑줄 표현 시 사용!

글자의 위로 붙는 ^위첨자
글자의 아래로 붙는 _아래첨자

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.

특수문자 표현!

엔티티(entity) : html에서 예약된 문자! 16진수의 엔티티 숫자~
< 특수 문자 표현>

````` # 220515 2번째 수업 17강~31강 ## 엘리먼트, 부모, 자식 , 형제 관계 ```html

```` - 총 엘리먼트 개수 : 9개(table 1개, tr 2개, td 6개) - table의 자식 엘리먼트 개수 : 2개 ( tr 2개) - table의 후손 엘리먼트 개수 : 8개 ( tr 2개 td 6개) - 자식과 후손의 경우 엔터도 한개로 친다! ## 테이블 태그 $$codepen https://codepen.io/jangka44/embed/ZEJMeLo?default-tab=html%2Cresult&editable=true $$ - table의 자식은 무조건 tr - td는 tr의 자식 - 대괄호로 속성을 나타낼 수 있다 - ````를 사용하면 글씨가 굵고 가운데 정렬됨 - ``,,``으로 테이블을 나눠줄 수 있다! - css에서 ``table{border-collapse:collapse;}``로 경계선을 지워줄 수 있다. ## a태그 $$codepen https://codepen.io/jangka44/embed/pBWYyR?default-tab=html%2Cresult&editable=true $$ - a태그에 ``target="blank"``를 속성으로 걸어주면 새창으로 열린다 - 기본은 원래창에서 열어진다 ``target=self`` - `` -> 페이지 주소로 이동!! http가 포함된 절대경로 주소를 입력해야함!!!!`` - ``
-> 임시링크`` - ``
아웃룩 메일로 이동할때 사용`` ## text-align 속성 $$codepen https://codepen.io/jangka44/embed/WNEaqLN?default-tab=html%2Cresult&editable=true $$ ```` /* ` ` : 후손선택자 */ ex) section a{} -> section 안의 후손 /* ` > ` : 자식선택자 */ ex) section>a{} -> section 안의 자손 /* 선택자가 길면 우선순위가 높다 */ ```` - ``section>a{text-align:center}``가 아무변화 없는이유 - a 자체가 inline이기 떄문에 가로폭이 없다 따라서 text-align을 줘도 정렬이 안되는것!! - text-align을 주기위해선 가로폭이 내용보다 넓어야한다!!! - section>a를 풀어 쓰자면 section의 자식(inline인 a)따라서 글자는 1개로 읽는다! - 따라서 section에 text-align:center를 주어야 글자들이 가운데 정렬된다. ## 반응 선택자 -> 선택자:hover $$codepen https://codepen.io/jangka44/embed/QVwVWZ?default-tab=html%2Cresult&editable=true $$ - block인 div를 나열시키기 위하여 display 를 inline-block을 주었다 - 마우스를 올렸을때 변화를 주기위해 ``div:hover { backgroudn-color:blue;}``를 주었다 -> 마우스를 올리면 파란색배경으로 변한다! - cf) 선택자:active 사용자가 마우스로 클릭한 태그를 선택한다. # 220521 세번째 수업 31강~51강 ## 띄어쓰기 - ## BMX사이트 구축하기 ### 1단계 `` ``를 사용하고 BMX만 링크로 $$codepen https://codepen.io/shinashoba/embed/XWZgvrm?default-tab=html%2Cresult $$ ### 중요!!!! 4단계 `` ``사용 불가 각 넓이 균일 a태그 모두 사용 $$codepen https://codepen.io/shinashoba/embed/qBxjedr?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy $$ - a태그는 큰 역할을 주는것이 아니다!!! 텍스트를 감싼다는 생각을 할것!!! - ex)``

링크

`` - a태그의 노말라이즈 - ex)``a{color:inherit; text-decoration:inherit;}``이런식으로 처음에 쓰고시작한다 - a태그는 inline이기 때문에 block으로 고쳐줘서 넓이를 걸어줘야 빈공간도 누를 수 있어진다! - hover는 최대한 좌측에 붙여놓는게 좋다(다음에 이유를 알려준다 하심) - cf) 젠코드 ``nav>({|}+section>a[href="#"]{아이템 $})*7+{|}``이렇게도 나타낼 수있다!!!! ## picsum.photo사용법 - http://picsum.phto/id/몇번째/가로/세로 이런식으로 내가원하는 크기의 이미지를 가지고올 수 있다 ## 이미지 $$codepen https://codepen.io/shinashoba/embed/QWQMpWY?default-tab=html%2Cresult&editable=true $$ - 이미지는 높이나 넓이만 줄경우 고유의 비율에 따라 줄어들고 늘어난다 - 넓이와 높이를 같이주면 비율이 깨져서 나온다 - ``object-fit:cover``는 비율을 맞춰주면서 화면에 꽉차지만 어느부분이 잘림 - ``object-fit:contain;``는 비율에 맞게 나오며 비율이 안맞은 공간엔 흰색공간이 생긴다 ## margin vs padding $$codepen https://codepen.io/shinashoba/embed/RwQZpax?default-tab=html%2Cresult&editable=true $$ - padding은 테두리 안쪽 여백이다 - margin은 테두리 바깥쪽 여백이다 ## nth-child $$codepen https://codepen.io/shinashoba/embed/qBxXrjj?default-tab=html%2Cresult&editable=true $$ - section에 hover를 줘야 한번에 바뀐다! # 220522 네번째 수업 52강~68강 ## block 요소의 가로정렬 $$codepen https://codepen.io/jangka44/embed/ZEJVrEv?default-tab=html%2Cresult&editable=true $$ ```` ▶ padding, margin의 다양한 값표현 - padding(안쪽여백) : 한자리입력 - 전체 (top,left,right,bottom) / 10px 두자리입력 - 상하 좌우(top/bottom - left/right) / 10px 20px 네자리입력 - 시계방향(top>right>bottom>left) / 10px 20px 30px 40px [개별부여가능] padding-top(위쪽안쪽여백) / padding-bottom(아래쪽안쪽여백) / padding-left(왼쪽안쪽여백) / padding-right(오른쪽안쪽여백) - margin(바깥여백) : 한자리입력 - 전체 (top,left,right,bottom) / 10px 두자리입력 - 상하 좌우(top/bottom - left/right) / 10px 20px 네자리입력 - 시계방향(top>right>bottom>left) / 10px 20px 30px 40px [개별부여가능] margin-top(위쪽바깥여백) / margin-bottom(아래쪽바깥여백) / margin-left(왼쪽바깥여백) / margin-right(오른쪽바깥여백) ★ 박스(block)를 중심배치 >> 숫자값 auto / margin:50px auto; = 50px의 바깥여백을 가지며 박스 중심배치 중심배치 : margin-left:auto & margin-right:auto 시 중심배치됨 margin-left:auto 만 있으면 왼쪽에 마진이 최대치가 되기때문에 오른쪽에 배치됨 margin-right:auto 만 있으면 오른쪽에 마진이 최대치가 되기떄문에 왼쪽에 배치됨 ```` ## bmx 메인 레이아웃, 이미지 4개를 배열하기 엘리먼트 4개!!! $$codepen https://codepen.io/shinashoba/embed/xxYXPre?default-tab=html%2Cresult&editable=true" frameborder="no $$ - img는 inline-blck이기 떄문에 display를 block으로 해줘야 줄이 바뀐다! - body에 text-align:center를 걸어줌으로써 나머지들 가운데정렬 - display block으로 바꿔줬기때문에 margin으로 가운데정렬 시켜준다! ## 선택자 연습!!!! 중요!!!!!! https://flukeout.github.io/ ```` 정답 to2.kr/dnf to2.kr/dng to2.kr/dnI 태그선택자 Div{ } 클레스 선택자 .a{ } 아이디 선택자 #id{ } Cf) div#a.a.b:hover a>div+nav{ } div인데 id가 a이며 a와b클레스를 가지고있고 마수스가 올려져있으며 누군가의 2번째 자식이며 그런녀석의 후손인 a이고 자식인 div와 nav div, section ->div와 section div * ->div안에있는 모든 것! Div +section Div에 붙어있는 동생인 section 1개 Div~section Div 옆에있는 동생인 section 모두 div>section div의 자식인 section div:first-child div의 첫번째 자식 div :only-child div다음 띄어쓰기!!!! only-child->누군가의 유일한 자식 div안에있는 같은 엘리먼트가 없는 모든자식 .a:last-child 클레스 a안의 마지막 자식 혼자있는 자식은 첫번째 자식이자 마지막자식이다! Div:last-child(3) div인데 누군가의 마지막에서 3번쨰 자식 div div nav div 2번째 자식 아님 div만 세는 것이 아니라 nav도 자식이기 때문에 세야 하는 것! ```` ## border-radius $$codepen https://codepen.io/jangka44/embed/LYjqRmd?default-tab=html%2Cresult&editable=true $$ ## CSS cursor $$codepen https://codepen.io/shinashoba/embed/KKQypdK?default-tab=html%2Cresult&editable=true $$ - 참고 사이트 - https://developer.mozilla.org/ko/ - https://www.w3schools.com/ ## 중요!!! inherit 인 css속성! $$codepen https://codepen.io/shinashoba/embed/JjpOdLp?default-tab=html%2Cresult&editable=true $$ ## a태그의 노말라이즈! ``a{color:inherit; text-decoration:inherit;`` # 22020528 5번째 수업 ## 메뉴만들기 $$codepen https://codepen.io/shinashoba/embed/ExQQQJZ?default-tab=html%2Cresult&editable=true $$ - 메뉴 박스, 메뉴, 메뉴 아이템, 메뉴 아이템의 텍스트, 호버된 메뉴 아이템의 텍스트 암기!! ## body의 노말라이즈 암기!! - ``body{margin:0; padding:0;`` ## Class 선택자 복습! $$codepen https://codepen.io/jangka44/embed/QWMoWNQ?default-tab=html%2Cresult&editable=true $$ - 클레스 선택자를 입력할때 두개를 같이 써주고싶으면 Class="class-1 class-2" 이런식으로 중간에 띄어쓰기를 함 $$codepen https://codepen.io/jangka44/embed/KKvEKbb?default-tab=html%2Cresult&editable=true $$ - 실전에선 위에 예제처럼 부모에만 클레스를 주고 나머지는 자식선택자로 많이 사용한다 ## ul(목록) li(항목), ol(항목에 순서가 있을때), li $$codepen https://codepen.io/shinashoba/embed/oNEEmoB?default-tab=html%2Cresult&editable=true $$ ## 노말라이즈 정리 ### a의 노말라이즈 ``a{color:inherit; text-decoration:inherit;}`` ### body의 노말라이즈 ``body{padding:0; margin:0;}`` ### ul li의 노말라이즈 ``ul, li{list-style:none; padding:0; margin:0;}`` ### h1의 노말라이즈 ``h1,h2,h3,h4,h5,h6{margin:0;}`` ## 메뉴만들기 2 nav ul li 이용 중요!!!! $$codepen https://codepen.io/shinashoba/embed/eYVVXJd?default-tab=html%2Cresult&editable=true $$ # 22020529 6번째 수업 중요!!!!! ## 83강 3가지 메뉴 구현! $$codepen https://codepen.io/shinashoba/embed/OJQQqqP?default-tab=html%2Cresult&editable=true $$ - class를 띄어쓰기를 통해서 갯수를 늘릴 수 있다! - 더 긴 선택자가 앞서기 떄문에 hover된 아이템보다 클레스가 2개인 선택자가 더 길기떄문에 이길 수 있다! ## 84강 a에 마우스를 올리면 인접동생인 div가 나타남 $$codepen https://codepen.io/shinashoba/embed/poaaBjr?default-tab=html%2Cresult&editable=tru $$ ## 85강 display 정리 - none : 없는것 안보이는것 아님 그냥 없음 - inline : 글자화, 너비최소축소, 가로정렬 - inline : 너비 높이 마진 패딩 안먹음 - ex) a, 글자, span - inline-block : 너비 높이 마진 패딩 먹힘 - ex) img - block : 블록화, 너비최대확대, 세로정렬 - flex, table : 블록과 똑같음 하지만 뭔가 다른것 나중에 알려줌! ## 86강 inline block으로 그리드 만들기 $$codepen https://codepen.io/shinashoba/embed/jOZzEwL?default-tab=html%2Cresult&editable=true $$ - 원래는 display:flex; 쓰면 되는 것이지만 옛날에 만든 사이트를 유지보수할때를 대비해서 알아둬야함 - 엔터도 font-size가 있기때문에 font-size를 0으로 해줘야 그리드를 만들어 줄 수있따. - 하지만 font-size는 inherit되기때문에 자식에 글이 나타나기 원하면 자식에 font-size:1rem을 줘야한다! - 그리고 ``vertical-align: top;``을 줘야 글자와 그리드가 정확하게 나타날 수 있다! ## 87강 inline grid 클래스 $$codepen https://codepen.io/shinashoba/embed/poaVggR?default-tab=html%2Cresult&editable=true $$ - 부모에만 inline grid클래스를 주고 css에서 작성하면 일일히 css를 작성할 필요가 없다! - css!! - 노말라이즈 : a,ul,li등 모든 특정태그에 작성해야할때 - 라이브러리 : inline-griid와 같이 필요할떄마다 클레스로 작성 - 커스텀 : 특정 엘리먼트를 선택하여 작성하는것! 범용성이 없음! $$codepen https://codepen.io/shinashoba/embed/MWQGKem?default-tab=html%2Cresult&editable=true $$ - calc 할때 띄어쓰기 주의!!! - ``.w-3\/6`` css에서는 /를 못쓰게 되기떄문에 \(역슬라이드)로 표현해줘야한다! ## 89~91강 화면의 높이대비 비율로 엘리먼트 높이 조절, 중첨퍼센트 $$codepen https://codepen.io/shinashoba/embed/dydeMJX?default-tab=html%2Cresult&editable=true $$ - 높이를 100%로 하기위해선 html부터 100%로 자식을 쭉 100%로 해줘야한다 - 감성 프로그래밍 같이 하기 위해선 배경색상이 inherit된다는것을 기억하고 배경색을 따로 하나 줘야한다! - 하지만 이렇게 하면 너무 복잡하기떄문에 ``heght:100vh;``로 표현하면 된다 vh는 화면높이 기준이다! 부모높이 무시함!! ## 92강 그리드로 계단식 비율 예제 $$codepen https://codepen.io/shinashoba/embed/wvyjGZx?default-tab=html%2Cresult&editable=true $$ - 주의!!! 높이는 최소값이기 떄문에 높이를 줘야 나타남 ## 93~94강 ``box-sizing:border-box;`` $$codepen https://codepen.io/shinashoba/embed/eYVrzKd?default-tab=html%2Cresult&editable=true $$ - inline-grid에 ``box-sizing:border-box;`` 도 줘야함!!! $$codepen https://codepen.io/shinashoba/embed/RwQyRYe?default-tab=html%2Cresult&editable=true $$ ## 95강 컨테이너로 레이아웃을 중앙에 모으고 너비 고정시키기 $$codepen https://codepen.io/shinashoba/embed/bGLMeZb?default-tab=html%2Cresult&editable=true $$ ## 96강 중요!!!! BMX 사이트구축 $$codepen https://codepen.io/shinashoba/embed/XWZqKwg?default-tab=html%2Cresult&editable=true $$ - ??????? .con>.menu-bar>menu-box-1>ul>li>a이런식으로 주고 보더를 준다음 border-left-width는 .menu-box-1>ul>li:first-child>a 이런식으로 주니까 안나타나는데 이유가 뭔가요? $$codepen https://codepen.io/shinashoba/embed/LYQmbQG?default-tab=html%2Cresult&editable=true $$ - 선택자가 길 수록 우선순위가 있는건데 저렇게 되면 선택자가 짧기 때문에 우선순위에서 밀리는 것이다! # 220604 일곱번째 수업 97강~110강 ## 97강 img box 클래스로 자식 이미지 주변에 여백제거 $$codepen https://codepen.io/shinashoba/embed/rNJrKzv?default-tab=html%2Cresult&editable=true $$ - img-box클레스를 주는 이유 디스플레이를 블럭으로 줌으로써 밑에 라인을 없애줌! ## 98~99강 음수 margin $$codepen https://codepen.io/shinashoba/embed/rNJrKJK?default-tab=html%2Cresult&editable=true $$ - 마진에 음수를 줘보자!!! 이미지 넣을때 쓰인다고 하심! $$codepen https://codepen.io/shinashoba/embed/WNMKygE?default-tab=html%2Cresult&editable=true $$ ## 100강 그리드 여백 ### 그리드 여백, 전통적인 방법, 작업 1, 아이템의 너비를 고정px로 ```` 전체 너비 1000px 이미지 하나의 너비 250px 여백 20px*3 실질적으로 이미지 4개가 사용할 수 있는 너비 235px ```` $$codepen https://codepen.io/shinashoba/embed/BaYPOZb?default-tab=html%2Cresult&editable=true $$ ### 그리드 여백, 전통적인 방법, 작업 2, 아이템의 너비를 퍼센트 빼기 픽셀로 $$codepen https://codepen.io/shinashoba/embed/xxYJapX?default-tab=html%2Cresult&editable=true $$ - 총여백 / 나눠가질 이미지 수! ### 아이템의 너비 수식을 풀어서 한줄나열 개수를 쉽게확인 $$codepen https://codepen.io/shinashoba/embed/xxYJapX?default-tab=html%2Cresult&editable=true $$ - 잘 안쓰지만.... 옛날 방식으로 만들어진 사이트는 이방식을 알아야 유지보수를 할 수 있다 ## 101강, 그리드, 여백 음수마진 방법 $$codepen https://codepen.io/shinashoba/embed/ZErMVdp?default-tab=html%2Cresult&editable=true $$ ## 102강 css postion 정리표 - ![정리표](https://i.imgur.com/XoWLfTu.png) ## 103강, absolute 요소 위치 옮기기 $$codepen https://codepen.io/shinashoba/embed/OJQoeQg?default-tab=html%2Cresult&editable=true $$ - div하나에만 걸어주면 div전체에 레이아웃 하나씩 생기는 것이다! ## 104강, absolute, width, height, top, left 로 화면을 2 * 2 등분 $$codepen https://codepen.io/shinashoba/embed/OJQoeQg?default-tab=html%2Cresult&editable=true $$ ## 105강, absolute, width, height, top, left 로 화면을 1 * 3 등분 $$codepen https://codepen.io/shinashoba/embed/xxYaoQb?default-tab=html%2Cresult&editable=true $$ ## 106강, absolute, width, height, top, left 로 화면을 3 * 3 등분 $$codepen https://codepen.io/shinashoba/embed/mdXQVpq?default-tab=html%2Cresult&editable=true $$ ## 107강, top, left, right, bottom의 개념과 기본값 $$codepen https://codepen.io/jangka44/embed/RwKOyzW?default-tab=html%2Cresult&editable=true $$ - absolute의 기본값은 유령화 되기 전에 위치이다 ## 강좌, 109강, absolute, top, left, right, bottom 으로 화면을 2 * 2 등분 $$codepen https://codepen.io/jangka44/embed/oNBOyzX?default-tab=html%2Cresult&editable=true $$ ## 중요!!!!! 강좌 110강 $$codepen https://codepen.io/shinashoba/embed/rNJQeQz?default-tab=html%2Cresult&editable=true $$ - transform으로 발생된 변화는 주변에 영향을 끼치지 않음!!! # 220605 여덟번째 수업 111강~117강 ## 중요!!! 111강, 멀티메뉴제작을 위한 선택자 튜토리얼 $$codepen https://codepen.io/shinashoba/embed/MWQzeyO?default-tab=html%2Cresult&editable=true $$ - .menu-1>ul ul -> 1차 메뉴 아래 모든 2차 3차 4차... ul을 선택->이거 하나 걸면 2.3.4...차 메뉴를 다 숨길 수 있다 - .menu-1 ul>li 메뉴1에 있는 모든 ul의 자식인 li가 선택됨 1.2.3.4차 메뉴아이템이 다 선택되는것! - .menu-1 ul>li:hover>ul 메뉴1에 있는 각각의 li를 선택시 그 밑에있는 메뉴를 나오게 할 수 있다. - 강의 몇번 볼것!!!! 잘모름 ## 112강, 중국집 메뉴로 알아보는 다층구조메뉴 $$codepen https://codepen.io/shinashoba/embed/xxYQOMo?default-tab=html%2Cresult&editable=true $$ ## 113강, 선택자 검색대상의 개수 $$codepen https://codepen.io/shinashoba/embed/YzeRWMw?default-tab=html%2Cresult&editable=true $$ ## 114강, white-space:nowrap, 줄바꿈 금지 $$codepen https://codepen.io/shinashoba/embed/jOZQMqv?default-tab=html%2Cresult&editable=true $$ - ``white-space:nowrap;``시 줄바꿈 안됨 ## 115강, 넘치는 부분을 처리하는 overflow 속성 $$codepen https://codepen.io/shinashoba/embed/XWZyjjv?default-tab=html%2Cresult&editable=true $$ - overflow로 넘치는 부분을 가려줄 수 있다! ## 116강, text-overflow:ellipsis, 넘쳐서 숨겨지는 텍스트 ... 처리 $$codepen https://codepen.io/shinashoba/embed/poaQENq?default-tab=html%2Cresult&editable=true $$ - ``text-overflow:ellipsis`` 시 넘쳐서 숨겨지는 텍스트 ... 처리해준다 ## 117강, 중앙 둥근 메뉴, 2차메뉴까지 구현 튜토리얼 $$codepen https://codepen.io/shinashoba/embed/MWQxBQe?default-tab=html%2Cresult&editable=true $$ ## 118강, 중앙 둥근 메뉴, 3차메뉴까지 구현 튜토리얼 $$codepen https://codepen.io/shinashoba/embed/wvyObOE?default-tab=html%2Cresult&editable=true $$ ## 중요!!!! 120강 FLEX - 올라온 자료 숙지할것!!! ## 122강, flex를 이용해서 성배 레이아웃을 만들어주세요, $$codepen https://codepen.io/shinashoba/embed/NWymyPv?default-tab=html%2Cresult $$ ## 123강, 영문 웹폰트 $$codepen https://codepen.io/shinashoba/embed/NWymyqv?default-tab=html%2Cresult $$ - 폰트와 폰트페밀리를 구분하자!!! - 퐅트페밀리 안에 서체, 굵기, 기울기 등이 있는데 이 세개가 값이 하나하나 다르다 그 값이 폰트임! ## 125강, 한글웹폰트는 무거우니 1개만 눈누에서 고르세요. $$codepen https://codepen.io/shinashoba/embed/NWymyqv?default-tab=html%2Cresult $$ ## 126강, 2개 이상의 웹폰트 사용법 $$codepen https://codepen.io/shinashoba/embed/NWymyqv?default-tab=html%2Cresult $$ ## 127강 하나의 문장안에서 영문자와 숫자만 다른 폰트로 적용하기 $$codepen https://codepen.io/shinashoba/embed/NWYPNQq?default-tab=html%2Cresult&editable=true $$ - curve가 들어갔을때는 curve를 지우면 되는것인가? 혼자있을 때는 적용이 안되는데? 둘이있으면 적용이됨 ## 추가 자료 테일윈드 방식으로 2차메뉴 구현 $$codepen https://codepen.io/shinashoba/embed/GRxKMag?default-tab=html%2Cresult&editable=true $$ ## 130강, 카카오뱅크 상단바 구현 $$codepen https://codepen.io/shinashoba/embed/GRxRKzV?default-tab=html%2Cresult&editable=true $$ ## 131강, flex 자식, 즉 flex item이 되면 display속성값이 block 처럼 취급된다. $$codepen https://codepen.io/shinashoba/embed/JjLjjPm?default-tab=html%2Cresult&editable=true $$ - 제목이 내용!!! ## 132강, 미디어 쿼리, 반응형 웹 $$codepen https://codepen.io/shinashoba/embed/xxWxxqM?default-tab=html%2Cresult&editable=true $$ ## 133강, CSS 변수 $$codepen https://codepen.io/jangka44/embed/gOGrOJm?default-tab=html%2Cresult&editable=true $$ - 변수 정의 부모에 --를 붙여서 변수 정의 - :root{--변수명:내용;} 이런식으로 줘야 변수가 전체에 정의됨 - 변수 사용 width:var(--변수내용); 이런식으로 변수사용 ## 134강, flex gap과 css 변수를 이용한, 반응형 그리드 $$codepen https://codepen.io/shinashoba/embed/WNzNbYm?default-tab=html%2Cresult&editable=true $$ ````css :root { --cc: 5; --y-gap: 40px; --x-gap: 20px; } width: calc(100% / var(--cc) - (var(--x-gap) * (var(--cc) - 1)) / var(--cc)); ```` ## 135강, flex grid 를 적용해서, CSS를 단순화 해주세요. $$codepen https://codepen.io/shinashoba/embed/BarayEG?default-tab=html%2Cresult&editable=true $$ - inline-grid - 음수마진 없이 : 숫자를 많이 써야함 ㅠ - 음수마진 있이 : 추가 엘리먼트가 필요할 때가 있다! - flex-grid - 추가 엘리먼트 필요(x) - 숫자입력 많을필요(x) ## 136강, before, after $$codepen https://codepen.io/shinashoba/embed/Yzazaaz?default-tab=html%2Cresult&editable=true $$ - after와 before에는 가상선택자를 못 붙인다 - li::after:hover이런거 못함 nth-child이런거 못함 - li:hover::after는 가능 ## 137강, opacity, transition $$codepen https://codepen.io/shinashoba/embed/yLKLjYR?default-tab=html%2Cresult&editable=true $$ - transition은 hover에 주는게 아니라 부모에 줘야 마우스를 뗄때도 transition효과가 나타남 ## 138강, transform, scale, z-index $$codepen https://codepen.io/shinashoba/embed/eYMYrKO?default-tab=html%2Cresult&editable=true $$ ## 139강, 폰트어썸 아이콘 $$codepen https://codepen.io/shinashoba/embed/GRxgqWK?default-tab=html%2Cresult&editable=true $$

HTML5&CSS