23.05.28 학습일기

앱 UI 레이어 3D 호버 에니메이션.app-ui가 부모요소가 되어야밑의 이미는 자식요소 .app-ui img왼쪽상단 기준으로 모일것임transform:rotate()만 하면 자연스럽지 않기 때문에 skew속성도 함께 적용 보더 애니메이션 네비게이션 호버 이펙트a태그는 인라인요소이므로 a의 크기만큼border가 늘어나는 것이 아니라before나 after가상클래스로height와 width를 가지고 있는 background가 커지고 작아지는 상태SNS 아이콘 애니메이션.sns a:before{ width: height: top: right: }위의 네가지를 조절하면 배경이 차오르는 위치를 바꿀 수 있다!before, after설정시 중요포인트! 선택자 -> 부모요소 : position:relativebefore,after설정 한 선택자 -> 자식요소 : position:absolutea:hover:before 띄어쓰기 없이 작성한다면a에 마우스 올렸을 때 before따라서 자기 자신을 의미

23.05.26 학습일기

CSS 포지션 속성 완벽하게 이해하기(3편) ✅ CSS 포지션(3)부모 요소 밖에서 원하는 위치로 보내기!부모 요소의 크기만큼 위치 100%로 설정하여 부모 요소 바로 옆에 딱 붙을 수 있도록!html구성 1 2 3 css구성 /* 부모요소 position:relative */ /* 자식요소 position:absolute */ .parent{ position:relative; border:3px solid #000; width:600px; /* 부모요소 크기지정 */ height:300px;/* 부모요소 크기지정 */ } .child1{ position:absolute; background-color: rgba(122, 122, 160, 0.476); width:150px; /* 자식요소 크기지정 */ height:100px; /* 자식요소 크기지정 */ /* default -> top:0; left:0; */ top:100%; /* text 가운데 정렬 */ text-align: center; line-height: 100px; vertical-align: middle; } .child2{ position:absolute; background-color: rgba(122, 122, 160, 0.476); width:150px; /* 자식요소 크기지정 */ height:100px; /* 자식요소 크기지정 */ /* default -> top:0; left:0; */ left:100%; /* text 가운데 정렬 */ text-align: center; line-height: 100px; vertical-align: middle; } .child3{ position:absolute; background-color: rgba(122, 122, 160, 0.476); width:150px; /* 자식요소 크기지정 */ height:100px; /* 자식요소 크기지정 */ /* default -> top:0; left:0; */ left:100%; top:100%; /* text 가운데 정렬 */ text-align: center; line-height: 100px; vertical-align: middle; } 핵심은 position지정자식요소에 left :100%를 하면 부모요소를 넘어가 바로 옆에 위치CSS 필수 가상클래스 ✅ 마우스 오버 효과(hover, transition)마우스가 올라가면 링크를 볼 수 있도록 제작a태그는 바디태그의 칼라를 따르지 않음⭐text-decoration이 underline로 기본적으로 되어있음 transtion속성은 :hover가 아닌곳에 넣어줘야 마우스 오버와 마우스 빠질 때 모두 적용cssa{ color:#333; text-decoration: none; transition: 0.5; } a:hover{ color:dodgerblue; text-decoration: underline; }html 법적고지 개인정보취급방침 개인정보처리방침 마우스가 올라가면 css가 변하는가상클래스 :hover와 애니메이션 효과를 주는 transition를 학습✅ 순서를 만드는 CSS가상클래스(nth-child, nth-of-type)용도 & 목적 : 클래스 이름을 정하지 않고 순서를 정하는 가상 크래스 ->내가 원하는 요소를 선택하는 것: nth-child() 가상클래스순서 가상 클래스를 사용하는 목적 : 클래스 이름을 주지않고 요소 선택display: inline-block로 변경했는데 margin:auto를 설정하면 절대 변하지 않아 왜? margin:auto는 block요소에만 적용하므로.box div:nth-child(1){} /*첫번째 div 선택*/[정리] 클래스 이름을 주지 않고 요소 선택 .box라는 div아래 div만 4개가 있음:nth-child() 라는 가상클래스를 이용해 css 다르게 설정가능 - 자식요소가 출연하는 순서에 따라 정해짐()안에 숫자삽입.box div:nth-child(1){ background-color: dodgerblue; } .box div:nth-child(2){ background-color: red; } .box div:nth-child(3){ background-color: #fff; } .box div:nth-child(4){ background-color: gold; } nth-child는 요소를 구분하지 않음: 순서가 밀려 변동가능성이 있음.box div:nth-child(1){ background-color: dodgerblue; } .box div:nth-child(2){ background-color: red; } .box div:nth-child(3){ background-color: #fff; } .box div:nth-child(4){ background-color: gold; } nth-of-type은 태그를 체크: 새로운 태그가 들어왔을 때 변동없이 지정된 태그의 순서를 유지해줌.box div:nth-of-type(1){ background-color: dodgerblue; } .box div:nth-of-type(2){ background-color: red; } .box div:nth-of-type(3){ background-color: #fff; } .box div:nth-of-type(4){ background-color: gold; } ✅ 순서를 만드는 가상클래스 (first-child, last-child)first-child : 가장 먼저 나오는 요소last-child : 가장 나중에 나오는 요소[정리]:nth-child()는 괄호가 있으나:first-child는 괄호가 없다:last-child는 괄호가 없다사용예시 공지사항 갤러리 .btn span{ background-color: #ddd; width:120px; display:inline-block; text-align: center; padding:5px; border-radius: 5px 5px 0 0; cursor: pointer; border: 1px solid #000; margin-right: 7px; } .btn span:first-child{ background-color: #fff; } .btn span:last-child{ color:red; } 제이쿼리 링크하기안에 링크$('.open-modal').click(function(){}) $('.open-modal').click(function(){})안에 링크$(function(){ $('.open-modal').click(function(){}) $('.open-modal').click(function(){}) }) 2번에서는 $(function(){})를 작성해줘야 함 jquery파일은 반드시 우리가 만든 custom.js파일보다 먼저나와야함제이쿼리 기본구문$('.show-btn').click(function(){});선택자 .show-btn을 클릭시 function()을 실행해라$('선택자').함수(funciton(){ $('선택자').메서드(); }); 제이쿼리(jQuery) 필수 핵심이론(함수) 요소의 정중앙에 오도록 하는 방법수평 : text-align:center;수직 : line-height : __px;line-height를 요소가 가진 높이값 만큼 주면 됨 click / mouseenter / mouseleave 보이기 감추기 보이기/감추기 BOX 레이어팝업(모달창) 띄울 때 : click$('.show-btn').click(function(){ $('div').show(); }); $('.hide-btn').click(function(){ $('div').hide(); });네비게이션 만들 때 : mouseenter, mouseleave$('.btn').mouseenter(function(){ $('div').show(); }); $('.btn').mouseleave(function(){ $('div').hide(); });제이쿼리(jQuery) 필수 핵심이론(메서드)('선택자').함수(function(){$('선택요소').메서드();})메서드종류메서드(이펙트)메서드(클래스 제어)메서드(요소 탐색) ✅ 메서드(이펙트)✔ .show()✔ .hide()✔ .slideDown()✔ .slideUp()✔ .fadeIn()✔ .fadeOut()✔ .stop()✅ 메서드(클래스제어)✔ .addClass()✔ .removeClass()✔ .toggleClass() ✅ 메서드(요소탐색)✔ .children() : 바로 아래 자손✔ .parent()✔ .siblings() : 형제✔ .find() : 자손전체✔ .next() : 선택요소 바로다음✔ .prev() : 선택요소 바로전 효과 메서드show() : 선택요소 보이기hide() : 선택요소 숨기기toggle() : 선택요소 보이고/감추고 (두가지기능)$('.show-btn').click(function(){ $('.container div').show(); }); $('.hide-btn').click(function(){ $('.container div').hide(); }); // 하나의 버튼이 두가지 기능을 가짐 : 토글 $('.toggle-btn').click(function(){ $('.container div').toggle(); });.slideDown() : 선택요소 서서히 보이기.slideUp() : 선택요소 서서히 감추기.slideToggle() : 선택요소 서서히 보이기/감추기$('.show-btn').click(function(){ $('.container div').slideDown(); }); $('.hide-btn').click(function(){ $('.container div').slideUp(); }); // 하나의 버튼이 두가지 기능을 가짐 : 토글 $('.toggle-btn').click(function(){ $('.container div').slideToggle(); });fadeIn() : 선택요소 페이드로 나타나게 하는 효과fadeOut() : 선택요소 페이드로 사라지게 하는 효과fadeToggle() : 선택요소 페이드로 사라지고 나타나게 하는 토글$('.show-btn').click(function(){ $('.container div').fadeIn(); }); $('.hide-btn').click(function(){ $('.container div').fadeOut(); }); // 하나의 버튼이 두가지 기능을 가짐 : 토글 $('.toggle-btn').click(function(){ $('.container div').fadeToggle(); }); ( 괄호 )안에는 무엇을 넣을까요?fadeIn(지속시간), fadeOut(지속시간)단어로 넣을 땐 반드시 ' ' 작성fadeIn('fast'), fadeOut('slow')숫자로 넣을 땐 숫자만fadeIn(500), fadeOut(2000)*1000이 1초임클래스 제어 메서드일반적으로 클래스를 넣고 뺄 때 사용하는 클래스명으로 active를 사용함주의할점 넣기 빼기 토글 BOX CSS적용하기.container div{ background-color: dodgerblue; //요거 height:300px; width:250px; margin-top: 10px; color: #fff; text-align: center; line-height: 300px; /* display: none; */ }.active { background-color: red; //요거 }위와 같이 작성하면 제대로 작동하지 않음왜?div에 class이름이 없으면 .container div{}에 작성된 디자인을 불러옴이미 background-color이 선언되어있고.active에서 background-color이 선언되어 있으므로충돌~~따라서 아래와 같이 작성.container div.active{ background-color: red; }나중에 선언된 속성값이 덮어쓸 수 있도록[주의할점]클래스 제어 메서드 3가지의 괄호 안에 . 과함께 클래스명을 쓰면 안됨$('.add-btn').click(function(){ $('.container div').addClass('active'); //active만 작성 }); $('.remove-btn').click(function(){ $('.container div').removeClass('active'); }); // 하나의 버튼이 두가지 기능을 가짐 : 토글 $('.toggle-btn').click(function(){ $('.container div').toggleClass('active'); });요소탐색 메서드children() : 선택 요소의 바로 아래 단계인 자식요소만siblings() : 선택요소의 형제요소 선택 MENU-1 SUB-MENU-1 SUB-MENU-2 SUB-MENU-3 SUB-MENU-4 MENU-2 SUB-MENU-1 SUB-MENU-2 SUB-MENU-3 SUB-MENU-4 .menu li에 마우스를 올리면 서브메뉴가 내려오도록 만든다 이때 .menu li는 li위치이므로아래와 같이 작성하면 모든 서브메뉴가 동일한 동작을 함$('.menu li').mouseenter(function(){ $('.sub-menu').slideDown() })[ 해결방법 ]그 자식이 보이도록 하기 위해 children()적용현재 마우스의 위치를 나타내는 this 적용$('.menu li').mouseenter(function(){ $(this).children().slideDown() })this는 현재 마우스가 올라간 특정 위치선택 -> 사용자가 어떤 메뉴에 마우스를 올릴지 모르기 때문에 this로 받음주의!! children만 작성하면 안됨 전체가 다 사라짐$('.menu li').mouseenter(function(){ $(this).children('.sub-menu').slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').slideUp() })계속 메뉴에 마우스를 올렸다 뺐다 하면 버그가 난것처럼 작동해결 : stop()사용$('.menu li').mouseenter(function(){ $(this).children('.sub-menu').stop().slideDown() }) $('.menu li').mouseleave(function(){ $(this).children('.sub-menu').stop().slideUp() })[미션]공지사항을 클릭하면 배경색이 바뀌고갤러리를 클릭하면 공지사항의 배경색은 원래대로, 갤러리의 배경색은 변경addClass() : 같은 속성이 있다면 대체, 없다면 추가클릭했던 css속성을 원래대로 복구하기 위해removeClass()$('.btn span').click(function(){ //.btn span이 2개가 있는데 둘중 무얼 클릭할 지 모르기 때문에 this로 받음 $(this).addClass('active') // 현재 형제요소는 1개밖에 없으므로 ()안에 숫자 적지 않아도됨 $(this).siblings().removeClass('active') })부모요소의 width를 상속width:inherit기본형 드롭다운 네비게이션마우스 올렸을 때 드롭다운 네비게이션만들기부모요소 & 자식요소로 구성부모요소에 마우스가 올라간다면 자식요소에 어떤효과를 적용할지 지정(css에서)부모 요소의 width값을 받아올 때 inherit속성 사용오버하면 상세설명 나타나는 상품목록show, hide를 사용하기 위해 보여지지 않도록 하는 방법display:noneopacity 0 , 1요기선 트랜지션을 주기위해 opacity 사용모든 요소는 position:absolute;를 주는 순간인라인요소, 블록요소 상관없이 인라인블록으로 변경따라서 컨텐츠의 양만큼 크기가 줄어듦부모요소의 크기 변경없이 수평수직정렬->position:absolute; top : -100%; left : 50%; transform : translateX(-50%);가상클래스 before, after은 무조건 content로 시작.icon span:after{ content : ''; position : absolute; }absolute를 사용하려면 부모에 relative를 줘야하지만.icon span은 이미 position: absolute이므로relative가 있다고 판단transform속성을 두번 사용할 수 없음transform : rotate(45deg);transform :translateX(-50%);해결방법하나로 뭉치기transform : rotate(45deg) translateX(-50%);마우스를 올렸을 때 보이도록 숨겨놓는 설정하는 방법visibility : hiddenvisibility : hidden;자리 값은 유지하되, 존재 값은 사라지게 함따라서 마우스를 올려둬도 나타나지 않음마우스 올라왔을 때 나타나게 하려면.icon:hover span{ opacity:1; visibility : visivble; } 2. display : nonedisplay:none;위의 속성은 아예 사라지게 함.icon:hover span{ opacity:1; visibility : visivble; }대신.icon span{ pointer-events:none; }도 사용가능오버한 메뉴 외 나머지 흐려지는 네비게이션수직 정렬시position : absolute; top : 50%; transform : translateY(-50%);.gnb에 마우스를 올리게 되면 a에 적용.gnb:hover a{ opacity : 0.3; }올라간 a태그의 opacity를 바꿔줌.gnb a:hover{ opacity:1; }아래 두개의 속성 순서는 바뀌면 안됨~!!!!.gnb:hover a{ opacity : 0.3; } .gnb a:hover{ opacity:1; }아래와 같이 작성하면 모든 요소에 >가 보임opacity:0;적용.gnb a:before{ content : '\f105'; font-family:fontawesome; opacity:0; }마우스가 올라갔을때만 표시하도록 하기 위해.gnb a:hover:before{ opacity:1; }

23.05.25 학습일기

✅ 시멘틱 태그계층 (1) > (2) > (3) > (4)상위 컨테이너 : .container(1) / .wrapper문서의 주요 내용 지정 : main주제별 콘텐츠 영역 : section(2)해더 영역(로고, 메뉴, 로그 검색 등) : header(2)제작 정보 및 저작권 정보 표시 : footer(2)콘텐츠 내용 넣기 : article(3) -> div(4: 세부정보)문서를 링크하는 탐색 영역 : nav세부 사항 요소 : summary / 추가 세부 정보 정의 : details[ 문제 상황 ].logo는 기본 왼쪽 정렬로 두고, .navi는 float : right; 을 했을 때 .navi는 부모 요소를 넘어가버림[ 해결 방법 ].logo와 .navi 둘 다 float성질을 적용한 후이 둘을 감싸고 있는 부모 요소인 .header요소에높이를 적용해줘야 한다(왜?) float를 적용하면 자식 요소가 없다고 판단따라서 높이가 줄어듦[ 높이 지정 방법 ]height지정overflow:hidden;설정header태그에는 height를 지정해줌✅ 시멘틱 태그를 사용한 레이아웃 만들기주의할점 : 공통적인 부분과 개별적인 부분의 CSS속성을 분리하여 적용하기 공통적인 부분section > article /* box2의 자식 공통적인 부분 */ .box2 article{ width:33.33333%; /*거의 비슷해짐*/ height:300px; float:left; }개별적인 부분article, article, article/* 개별적인 부분 */ .sub1{ background-color: darkgray; } .sub2{ background-color: lightgray; } .sub3{ background-color: lightslategray; }✅ CSS 포지셔닝 (1)position속성 ⭐⭐relative : 부모 요소에 줌absolute : 자식 요소에 줌postition 속성을 함께 써줘야 적용/*예시*/ potition:absolute; left: right: top: bottom:부모요소(.parent)에 position : relative;를 주지 않으면자식요소(.child)는 부모요소를 브라우저로 인지자식요소왈 > "아! 내 부모는 body태그이구나!"-> 브라우저에서 위치를 잡음[ 정리 ]position을 사용할 경우부모 > 자식의 계층 구조 잡기부모 position:relative, 자식 position:absolute; 적용하기position:absolute;을 선언한 자식에게 top, bottom, right, left 선언하기[ 미션 ]자식요소를 오른쪽 하단에 배치하기html css /* 부모요소 position:relative */ /* 자식요소 position:absolute */ .parent{ background-color: skyblue; width:1000px; /* 부모요소 크기지정 */ height:500px; /* 부모요소 크기지정 */ position:relative; } .child{ background-color: grey; width:200px; /* 자식요소 크기지정 */ height:100px; /* 자식요소 크기지정 */ position:absolute;/*position:absolute;이 선언되어 있어야 아래의 right, bottom 적용가능*/ bottom:0; right:0; }✅ CSS 포지셔닝 (2)자동으로 수평 수직 중앙 위치 시키기(자식 요소를 원하는 대로 위치)position속성과 함께 사용⭐⭐left, right, top, bottom 좌표 속성x-index속성이전 내용 복습 - 포지셔닝 하기부모 > 자식 요소 간 계층 구조 설정부모 - position:relative, 자식 - position:absolute; 지정주의할점부모 요소의 높이가 없을 경우자식 요소의 높이만큼 차지그러나 자식 요소가 position:absolute를 가진다면붕 떠버림 => float적용한 것과 동일한 원리.parent{ position:relative; border:1px solid #000; width:500px; /* 부모요소 크기지정 */ } .child{ position:absolute; background-color: grey; width:100px; /* 자식요소 크기지정 */ height:100px; /* 자식요소 크기지정 */ }수직 중앙 정렬html요소의 좌표 기준 : 왼쪽 상단x축 +값 왼쪽에서 오른쪽으로y축 + 값 위에서 아래로자기 자신의 크기에서 x축 -50%, y축 -50%transform: translate(-50%, -50%); 수직 수평 중앙 위치시키기 /* 부모요소 position:relative */ /* 자식요소 position:absolute */ .parent{ position:relative; border:1px solid #000; width:500px; /* 부모요소 크기지정 */ height:500px;/* 부모요소 크기지정 */ } .child{ /* 브라우저 크기에 관계없이 항상 수직 수평 중앙 정렬하기 */ position:absolute; top:50%; /*x축 +값 왼쪽에서 오른쪽으로*/ left:50%;/*y축 +값 왼쪽에서 오른쪽으로*/ transform: translate(-50%, -50%); /* 자식요소 크기지정 */ background-color: grey; width:100px; height:100px; }퍼센트는 상대적이므로 브라우저 크기가 작아지거나부모 요소가 작아져도설정한 수직 수평 중앙 정렬은 일정하게 유지요소를 부모요소에서 정중앙에 배치?[ 암기 ].parent{ position:relative; } .child{ position:absolute; top:50%; /*x축 +값 왼쪽에서 오른쪽으로*/ left:50%;/*y축 +값 왼쪽에서 오른쪽으로*/ transform: translate(-50%, -50%); } 요소를 브라우저에서 정중앙에 배치?[ 응용 ].parent{ /*position:relative적용안함*/ } .child{ position:absolute; top:50%; /*x축 +값 왼쪽에서 오른쪽으로*/ left:50%;/*y축 +값 왼쪽에서 오른쪽으로*/ transform: translate(-50%, -50%); }

23.05.24 학습일기

✅ CSS 적용 우선순위!important StyleInline StyleID Selector StyleClass Selector StyleTag Selector Style중복된 선택자가 있는 경우 외부스타일 CSS우선순위내부파일 Style> 외부파일 Style중복된 선택자가 있는 경우 내부스타일 CSS우선순위!important > Inline > ID Selector > Class Selector> Tag Selector예시)h1{ color : red !important; }css는 작성순서 관계 x✅ CSS 서식관련 속성(텍스트 스타일)- css 기본 default 값font size : 16px, 1em, 100%, 12pt- colorrgba에서 a는 투명도예시 ) rgba(0,0,0,0.5)- text-transform 텍스트 대소문자 변환예시)text-transform : capitalize; // 단어의 첫 글자를 강제로 대문자로 변경text-transform : uppercase; //전부 대문자로text-transform : lowercase; //전부 소문자로- text-align 문자 정렬 방법 지정- line-height(줄간격)일반적으로 body태그에 넣어 사용 em단위로 사용 왜? 상대적으로 적용하기 위해✅ CSS 서식관련 속성(목록 스타일) ⭐css 가상 클래스 :before를 이용해 원하는 기호를 사용할 수 있다 -> 불릿아이콘을 사용예시 ).menu li::before{ /*ㅁ+한자키 : 불릿아이콘사용 or 폰트어썸에서 가져와 사용가능*/ content:'★'; }- ul태그 속성disc, circle, square, none- ol태그 속성decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alphaCSS 자손선택자 vs 자식선택자HTML 부모요소 vs 자식요소부모요소 vs 자식요소CSS 자손선택자(스페이스) vs 자식선택자(>)index.html style.css /*스페이스 : 자손선택자, >는 자식선택자(바로 아래)*/ .box{ border:1px solid red; width:400px; height: 400px; } .box > div{ border:1px solid blue; width:200px; height: 200px; } .box > div div { width:50px; height:50px; background-color: black; }✅ 상세 디자인을 위한 CSS 박스모델(border, border-radius)html은 네모난 박스와 같은 상하좌우를 가짐border-style : solid/dashed/dotted 세가지 가장 많이 사용border-width : px가장 많이 사용✅ 상세 디자인을 위한 CSS 박스모델(width, height, padding, margin, box-sizing)box-sizing ⭐⭐ (레이아웃 지정시 매우 중요!!) 최초에 정한 너비와 높이를 유지하는 것왜? border나 padding, marign에 의해 크기가 커지는 것을 box-sizing : border-box 가 방지해줌최초에 정한 width, heigth가 있을 때,그 다음에 준 border, margin, padding에 의해 늘어나는 것을 방지정리 > 최초의 너비값과 높이값을 유지한 채 padding, border를 그 안에 심어라✅ 상세 디자인을 위한 CSS 박스모델(box-shadow, text-shadow)box-shadow : 박스에 주는 그림자[필수속성]offset-x : 수평 그림자의 offset값(+ : 왼쪽에서 오른쪽으로)offset-y : 수직 그림자 offset값(+ : 위에서 아래로)blur : 그림자 가장자리를 부드럽게 처리하는 정도color : 색상 지정예시)index.html style.css div{ background-color: #ccc; width:250px; height:200px; margin:10px; border-radius: 5px; float : left; } .box1{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : 5px 5px 20px rgba(0, 0, 0, 0.463); } .box2{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : 0 0 20px rgba(30, 144, 255); } .box3{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : 10px 10px crimson; } .box4{ /*box-shadow : (inset : 안쪽쉐도우) x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : inset 0 0 20px rgba(0, 0, 0, 0.26) } .box5{ /*box-shadow : x축 이동거리 y축이동거리 퍼진정도 색상*/ box-shadow : inset 0 0 20px rgba(255, 255, 255, 0.9) }text-shadow : 텍스트에 주는 그림자index.html Coding Works Class style.css body{ background-color: #333; } /* text-shadow에서는 inset이 없음 */ .heading{ font-size: 100px; text-transform: uppercase; color: gold; /* text-shadow: 0 0 20px rgba(255, 255, 255, 0.6); */ text-shadow: 5px 5px dodgerblue, 10px 10px 0 #90c8ff; }퍼블리싱의 모든 것! ✅ HTML 인라인요소, 블록요소, 인라인블록인라인(inline)요소블록(block)요소인라인블록(inline-block)요소- 인라인요소✔ 한줄에 여러개 배치✔ 기본 너비 값은 컨텐츠의 너비값✔ 크기 값을 가질 수 없음 : width, height를 줘도 작동하지 않음을 의미✔ 상하 마진은 가질 수 없음인라인요소span, a, small, big, em, u, s, del, br, q, b, strong, mark, sub, sup, video, audio - 블록요소✔ 한줄에 한개만 배치✔ 기본 너비 값은 100%✔ 크기 값을 가질 수 있음✔ 상하좌우 마진 가질 수 있음블록요소div, table, figure, figcaption, caption, header, nav, footer, section, article, asice, p, blockquote, ul, ol, li, td, th, form, hr, h1~h6 특징전체적으로 레이아웃을 잡는 태그- 인라인 블록요소✔ 한줄에 여러개 배치✔ 기본 너비값은 컨텐츠의 너비값✔ 크기 값을 가질 수 있음✔ 상하 마진은 가질 수 있음인라인 블록 요소img, input태그들, button, fontawesome예시)[ 문제상황 1]상하간격 너무 좁아 margin-top을 주려고 하니 먹지 않음 왜? 인라인요소 이기 때문 이러한 3가지 요소를 변경해주는 방법 => display 속성display속성에 주로 사용하는 값block, inline-block, inline, none, flex✅ CSS로 HTML 가로 배치하기(float, overflow, clear, inline-block)1. 엘리먼트 수평 정렬하기 (속성 : float)float 속성float 속성none(default) : float속성 적용 안함inline, block, inline-block관계없이 적용 가능left : 요소가 컨테이너 왼쪽 배치right : 요소가 컨테이너의 오른쪽 배치margin : auto 요소를 중앙에 배치(inline요소는 적용되지 않음, 반드시 block요소만 적용) [ 문제상황 1 ]부모요소는 자식요소의 높이 만큼 자동으로 늘어나지만float : left 로 주게되면부모요소는 자식요소가 없다고 판단해 높이값을 잃음[ 해결방법 ]부모요소에 높이값 주는방법heigth : 200px; //자식 요소의 높이 값이 변경되면 이것도 바꿔 줘야 함overflow : hidden; //자식요소의 높이 값의 변화에 따라 높이 값이 변경됨자식요소에 float가 있으면 부모요소의 높이값을 찾아줘야함 -> overflow:hiddenfloat성질자식 요소에 float성질을 주면 부모 요소는 높이 값을 잃는다높이 값을 찾아주는 방법height지정(단, 자식 요소의 높이 변경 시 변경 해줘야 함)overflow : hiddeninline, inline-block인 경우 margin-auto 사용 불가이땐 부모 요소에 text-align:center사용(자식요소의 inline요소는 중앙정렬)float 속성 적용되면 다음 요소가 float속성을 상속받음 -> clear속성으로 해제left : 왼쪽 배치된 float속성 상속 해지right : 오른쪽으로 배치된 float속성 상속 해지both : 왼쪽 또는 오른쪽으로 배치된 모든 float속성 상속 해지예시)index.html float : none float : left float : right clear : both style.css .parent{ border : 5px solid red; width : 600px; } .top{ background-color: purple; height:50px; } .left{ background-color: grey; height:100px; width: 200px; float:left; } .right{ background-color: orange; height:100px; width:400px; float: right; } .clear{ background-color: purple; height: 50px; clear:both; /*앞에 있는 float속성을 다음요소가 상속받는데 이것을 해제해주는 역할*/ }[중요] 명심!⭐⭐⭐inline 요소 중앙정렬 방법 : 부모 요소에 text-algin:center;block 요소 중앙정렬 방법 : 자기 자신에게 margin:auto;✅ 가로 배치하는 2가지 방법1. float와 overflow를 사용해 배치(px 정확히 맞춰야함)예시)index.html article article article style.css section{ border:5px solid black; width: 600px; overflow:hidden; /*2. 부모요소의 크기를 보장해주기 위해 사용*/ } section article{ background-color: gold; width:200px; height:100px; float:left; /*1. float하면 부모요소는 자식요소가 없다고 판단해 크기가 작아짐*/ border:1px solid red; box-sizing: border-box; /*3. 크기가 맞지않아 한줄로 가로정렬 불가, 이걸 적용하면 해결 가능*/ }2. display : inline-block으로 배치예시)index.html article article article style.css section{ border : 5px solid black; text-align: center;/*2. 가운데 정렬하기 위해 부모요소에 지정*/ } section article{ background-color: gold; width:200px; height:100px; border:1px solid red; display:inline-block; /*1. inline요소는 margin:auto불가*/ } article은 블록요소 (세로배치됨) -> width:100%❓ 가로 배치 하는 방법?inline로 변경 => 가로 배치는 되나 width값을 가지지 못함inline-block => 가로 배치 되면서 width값을 가짐❓ 가운데 정렬 하는 방법?본인 선택자에 margin:auto불가왜? 블록만 가능❓ 그렇다면 inline은??부모 요소에 text-align: center설정선택시 고려사항크기를 정확히 맞춰야 한다? => float사용보기 좋게만 가운데 정렬하면 된다 => display:inline-block;