HTML,CSS - CSS Study(1)

1. CSS 과제 피드백 : 230126

html에서는 style.css만 경로로 불러내어 style.css에서는 모든 css 파일들을 import해서 사용한다.
- 결국, html파일에서는 간단하게 보이고 style.css에서 모든 css 파일들을 관리할 수 있다.
마진은 top에 주는 것이 좋다. 아래 객체들이 영향을 받기 때문이다.
pseudo 코드 : hover 클릭했던지 마우스 포인터에 따라 색깔을 바꿀 수 있다.

2. CSS 강의1 시작 :

13~19강 : 명확히 정리

14강) CSS를 링크하는 방법 2가지

보통 개별적인 페이지인 index.css에서 공통분모를 스타일링하는 style.css를 import로 불러와서 사용한다.
@import의 단점은 여러 단계로 css 파일을 불러내는데 네트워크가 안좋을 때는 문제가 발생할 수 있다. 하지만, 협업에서는 좋다.
아래 코드 처럼 브랜치로 가지치기를 한 단계만 거쳐 지나가면, @import 방식은 쓸만하고 좋다.

style.css :

body{
	margin: 0;
}

index.css

@import url(style.css);		// import 시키기 

h1[lang="ko"]{
	color : aqua;
}

h1.cafe{
	color: green;
}

25~29강 : 명확히 정리

30강) 알랜드 카페 영역 배경 이미지(핵심!!)

html이나 css에서 파일 명명법 :
- html이나 css에서 파일 명명은 구분자에서 대소문자를 없애고 _(under bar)도 없애고 오로지 대쉬(-)로 구분해준다.
- ex) .header-cafe-bg-box

나누어 써야할 이미지를 묶어주는 방법 :
- 네비게이션 바와 백그라운드 부분의 이미지가 나뉘기 때문에 문제가 많다.
- 그래서 div로 블럭을 감싸는 더 큰 블럭으로 만든다!(원래는 작은 블럭의 div 태그였는데 이것을 묶어주는 더 큰 div 블럭으로 묶어주자.)

배경 이미지 블록 크기에 맞추기 :
- 이미지는 원래 삽입하면 반복 되는 형태로 출력되므로 반복되지 않게 해주어야 한다.( background-repeat : no-repeat; )
- 배경 이미지 블록 크기에 맞추어 위치를 잡아주는 부분이 추가적으로 필요하다.( background-size : cover; )

.header-cafe-bg-box{
	height : 530px;
	background : url(../images/2.jpg);
	background-repeat : no-repeat;
	background-size : cover; 
}

배경에 대한 속성 한번에 처리하기 (나중에 수정하기가 어렵다.):

.header-cafe-bg-box{
	background : url(../images/2.jpg) no-repeat
	-245px/cover; 
}

31강) 배경이미지의 여백 색칠하기

브라우저의 크기를 변경할 때, 여백의 크기도 변경되므로 여백에도 색을 입혀주자.
- 따라서, background 속성에 색을 추가해주자.

.header-cafe-bg-box{
	background : #D4BFA0 url(../images/2.jpg) no-repeat
	-245px/cover; 
}

하지만, css도 코드의 순서에 따라서 기본 배경값으로 덮어씌워져서 순서에 주의하자!

// 배경이 살구색으로 출력
.header-cafe-bg-box{
	background : url(../images/2.jpg) no-repeat
	-245px/cover;
	background-color: #D4BFA0; 
}

// 배경이 흰색으로 출력 
.header-cafe-bg-box{
	background-color: #D4BFA0; 
	background : url(../images/2.jpg) no-repeat 
	-245px/cover;
}

32강) 그라디언트 배경색

우리가 아는 그레디에이션을 의미한다.
Linear(선형으로 그라데이션), Radial(원)
Repeating Linear(선형으로 반복되어 마치 모양이 파도 같다), Repeating Radial(마치 호수에 돌을 던져 물결치는 모습 원형으로 퍼짐)
Conic(원뿔형이다.)
Linear 방식을 가장 많이 사용하고 Gradient는 보통 color의 속성이 아니라 image의 속성이다.

background: linear-gradient(#e66465, #9198e5);
background: radial-gradient(#e66465, #9198e5);
background: repeating-linear-gradient(#e66465, #9198e5 50px);
background: repeating-radial-gradient(#e66465, #9198e5 50px);
background: conic-gradient(#e66465, #9198e5);

33강) Linear Gradient :

문법만 정리하자! Linear Gradient - MDN에서 찾아보기

34강) Radial Gradient

문법만 정리하자! Radial Gradient - MDN에서 찾아보기

35강) Radial Gradient 옵션

문법만 정리하자! Radial Gradient 옵션 - MDN에서 찾아보기

36강) 멤버 페이지 그라디언트로 배경 칠하기(핵심!!)

image의 background와 gradient도 배경 이미지가 겹쳐서 같이 보이지 않는다!
이미지와 그라데이션은 위에 있을수록 먼저 올라가고 뒤에 있는 것은 바닥에 깔리게 된다.

실습 코드 : 경로 member/index.css

	box{
		margin: 0;
	}
	
	.header-welcome-bg-box{
		height: 244px;
		background: linear-gradient(red, yellow),				// 먼저 색깔을 입히고 이미지를 올리면 가능하다!
		url("../../images/1.jpg") no-repeat center;
	}
		                                                                                                                                                      

37강) Background 옵션(중요!, 어렵)

attachment 속성 : 예전에 유행했다.
css 속성 중에서 box의 overflow 개념
- 컨텐츠를 넘어서면, scroll로 설정하여 넘어간 범위를 제한된 범위에서 알 수 있다.
fixed, local,scroll 비교 (실습 필수!)
- fixed : 고정된 배경이 화면에 붙는지 (전체 스크롤을 움직이면 화면이 같이 따라간다.)
- local : 고정된 배경이 컨텐츠에 붙는지
- scroll : 고정된 배경이 박스(엘리먼트)에 붙는지 확인(전체 스크롤을 움직이면 화면이 같이 따라가지 않는다.)

attachment 실습 코드 :

	background-attachment: scroll; 
	background-attachment: fixed; 
	background-attachment: local; 

	.rland{
		height: 530px;
		overflow: scroll;
		background-attachment: fixed;
		color: white;
		background: url(../images/2.jpg) no-repeat left top;
		background-attachment: scroll;
	
	}

38강) 폰트 스타일링(핵심!!)

범위 블락으로 나누어 주기
하위 블락은 따로 아래쪽에서 블락으로 나누어 써야 나중에 수정시 좋다.
Font 제너릭 설정 : 내가 그런 폰트를 항상 가지고 있어야지 적용된다. 없으면 적용되지 않는다.
실습 코드 :

.header-height{
	font-family: 'Segoe UI', "굴림", "고딕";
	font-size: 16px; 
	font-weight: normal; 
	color: #fff;
}

serif, san-serif 차이 : 앞파벳에 꺽음새가 있고 없고의 차이
아래 코드와 같이 작성하면, font-family에서 계속 다음 폰트를 찾다가 없으면, sans-serif 폰트 계열 중에서 아무거나 찾아서 가져온다.

.header-height{
	font-family: 'Segoe UI', "굴림", "고딕", sans-serif;
	font-size: 16px; 
	font-weight: normal; 
	color: #fff;
}

font-style : 내가 갖고 있는 파일 중에서 해당 글씨체가 없으면 가져올 수 가 없다.
실습 코드 :

.header-height{
	font-size: 16px; 
	color: red;
	font-family: 'Segoe UI', "굴림", "고딕", sans-serif;
	font-style: normal;			// italic, oblique 등의 종류가 있찌만 해당 파일을 갖고 있지 않으면 변환된 모습을 볼수 없다.  
 	font-stretch: expanded 	// 한글의 장평 설정과 같다. 
}

39강) 무료 폰트 다운로드(핵심!!)

배포 가능한 폰트 : 웹폰트 이용(모든 사용자가 같은 폰트로 웹을 이용할 수 있다. )
google Fonts 검색해서 무료 폰트 이용하기
폰트를 다운 받아서 설치하면, 나만 이용할 수 있는 폰트이다.

프로젝트용으로 모든 유저들이 이용할 수 있는 폰트를 위해서 배포하는 방법 :
- google Fonts 페이지의 다운받고 싶은 폰트 페이지에서 select this style 버튼을 누른다.
- 그리고, 오른쪽 위의 버튼을 누르면, selected Family 박스에서 @import 부분을 css 코드의 상단에 가져가서 import시킨다.

@import로 배포용 폰트를 사용하는 방법(style 태그 버리고 @import 부분만) :

@import url(style.css);			// @import를 css에 적용한다.

@import url('https://fonts.googleapis.com/css2?family-Nanum+Brush+Script&diploy=swap');

하지만, 웹폰트로 이용하기 위해 파일 확장자가 woff2이기 때문이다. 따라서, 폰트를 다운 받은 경우 폰트는 ttf 파일이기 때문에 툴이나 웹서비스를 통해서 ttf 파일을 woff2로변환하여 웹폰트로 이용할 수있게 해야 한다.

직접 다운받아서 사용하는 font 예시 :

@font-face{
	font-family: "newlec";  	// 내가 파일 확장자를 변환하여 지정한 파일이기 때문에 font-family 명을 내가 임의로 지정하여 해당 폰트를 사용할 수 있어야 한다. 
	src : url("../font/aa.woff2");
}

40강) Border 속성 :

border radius 설정!

41강) Text 정렬(핵심!!) :

html와 css에서 박스라는 것은 공책에 글을 쓰는 것과 같아서 박스기준 왼쪽 위부터 차례대로 글이 써진다.
- text-align : 박스에는 공책에 여러 줄이 있는 것처럼 생겼는데 박스 첫 줄 기준으로 정렬해준다.(수평 정렬 = 열이 정렬 된다.)
- line-height: 박스에서 공책에 여러 줄이 있는 것처럼 생각이 되기 때문에 행이 정렬된다.(수직 정렬)
아래 css 코드 경우, 보통 line-height는 텍스트가 한 줄마다 설정이 된다.
- 따라서, 텍스트가 여러 줄을 일 경우에 텍스트의 양이 많아져서 텍스트 한 줄 기준 범위를 넘어 섰을 때, 바로 이어서 텍스트가 출력되는 것이 아니라 45px의 높이만큼 다음 줄로 넘어간다.

text-align : center; 
line-height: 45px; 	// 텍스트 한 줄짜리 정렬 할때 쓴다. 

버튼 만들기 실습 하기 :

.btn-cafe-menu-all{
	/*text style*/
	font-family : 'Segoe UI', '굴림';		// font-family만 ''를 붙이고 1개만 있는 폰트는 붙이지 않는다. 
	font-size : 12px;
	font-weight : bold;					// font-style : 'white bold'가 아니라 2개로 나뉜다.;  
	color : #fff;
	
	text-align : center;
	line-height : 25px; 					// line-height : center로서 보통, px 값으로 표시된다.

	/*content box style*/
	background-color : #D68814;

	// border 설정하기 전에 width와 height를 설정해줘야 한다.(기본 중의 기본이다)
	width : 83px;
	height : 25px; 
	
	border-radius : 10px 0 10px 0;	// 	border-radius : 10px 0;가 아니라 일일이 다 설정해주기!
		

}

42강) 텍스트에 아이콘 붙이기

padding 개념 : 컨텐트의 내용을 밀어내고 뭔가를 넣을 수 있는 공간
하지만, padding을 추가한 경우에, 박스도 그만큼 뒤로 밀리기 된다.
padding-left와 padding-right는 박스를 왼쪽이나 오른쪽으로 밀어내고 자리를 차지한다.
그래서 추가적인 개념이 필요해서 추가적인 조치가 필요하다.

background 속성 설정 방법 :
- background 속성을 한번에 생성하면, 나중에 디버깅에서 어려움을 느끼고 수정사항에 어려움이 많다.
- 그래서, background 속성에 이미지와 색깔을 같이 넣고 싶으면, 한번에 속성을 부여하지 말고 일일이 따로 속성을 부여하자!

.btn-rland-location{
font-family: 'Segoe UI', Tahoma;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;

background-color: rgba(110,152,9,0.65);		// 여기 추가!!

width: 173px;
height: 40px; 

padding-left: 40px;

background-images: url("../images/location.png");	// 여기 추가!!
background-repeat: no-repeat;
background-position: 20px center;

}a

43강) Box Sizing :

기존에 우리가 사용했던 box는 content box였다. 그래서 padding을 하면 뒤로 밀러 낟다. 결론적으로 우리는 content-box가 아니라 border-box를 이용해야 한다.
border-box를 이용하면 padding에 의해서 밀려나지 않는다.
box-sizing : border-box;
box-sizing : padding-box;
box-sizing : content-box;

.btn-rland-location{
font-family: 'Segoe UI', Tahoma;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;

background-color: rgba(110,152,9,0.65);
box-sizing: border-box;			// 여기 추가!!

width: 173px;
height: 40px; 

padding-left: 40px;			

background-images: url("../images/location.png");
background-repeat: no-repeat;
background-position: 20px center;
}

44강) SVG 아이콘 :

bitmap 파일과 SVG 파일은 엄연히 다르다. bitmape 파일은 픽셀마다 색깔을 입혀서 확대하면 픽셀이 깨진 모습이 보이고 SVG 파일은 벡터로 이미지를 그리기 때문에 깨지지 않는다.
어도비 XD에서는 이미지가 SVG 파일로 받아지기 때문에 SVG 파일은 css에 바로 사용할 수 없어서 웹 서비스를 통해 변경해주어야 한다.

45강) Box의 크기 고려사항 :

버튼은 컨텐트 자체의 스타일이고 박스의 스타일이 아니다!!
기존에는 버튼을 div 태그에 스타일링을 했었는데 이젠 그렇게 하지 않아도 된다.
이제는 컨텐트인 a 태그에 스타일링을 하자1

// 기존 방식
<div class="btn-cafe-menu-all"><a href="">전체 메뉴</a></div>
//새로운 방식 
<div><a class="btn-cafe-menu-all" href="">전체 메뉴</a></div>

하지만, 이렇게 a태그로 class를 설정하면, 버튼의 박스가 작아졌다. 왜 그럴까? box layout을 이애하고 있어야 한다.

46강) Box Layout Mode

우리가 기존에 content block이라고 알고 있던 table관련된 태그라던가, form 태그는 사실 block이 아니다.
즉, block은 outside menu이다. inside는 table, flex, grid라고 하는 것이 있다.
display 속성 중에서 inline이라는 친구가 있으면 width나 height로 크기를 조절 할 수 없다!
display : block; 는 수직으로 배치 한다.
display: inline; 는 수평으로 배치 한다.
inline처럼 배치되는 것을 포기하지 않으면서 크기를 설정할 수 있으려면, inline-block으로 display를 바꿔야 한다.

.btn-rland-location{
font-family: 'Segoe UI', Tahoma;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;
display: inline-block;		// 여기 추가!!

background-color: rgba(110,152,9,0.65);
box-sizing: border-box;

width: 173px;
height: 40px; 

padding-left: 40px;

background-images: url("../images/location.png");
background-repeat: no-repeat;
background-position: 20px center;
}

a 태그의 밑줄 없애기 : style.css에서 전역의 a 태그에 text-decoration 속성을 설정할 것이다.
[style.css]

a{
	text-decoration : none;
}

추가적으로 방이 컨텐츠를 포함하고 있어야 한다.
즉, a태그가 가구처럼 외벽같은 방이 되고 그 내부에 컨텐츠를 포하여 같이 움직이게 해야한다.

47강) Box의 크기 고려사항 2 :

앞에서 고려한 것 처럼, 텍스트의 크기가 변경되는 경우 박스의 크기를 넘어서거나 작아져서 크기가 안맞는 경우가 발생한다.
따라서, 여백에 신경써서 padding : 3px 14px;로 설정해준다. (padding 속성은 위아래/ 좌우)
하지만, 모든 것에 염두하지 말고 생각해서 설계하자.
padding 설정을 추가해주면, 유지보수 텍스트를 쉽게 수정할 수 있다 .

하지만, 이렇게 수정해도 글씨를 너무 키우면, 박스와 패딩, 그리고 텍스트의 비율이 안맞는 경우가 발생해서 추가적으로 생각해보자!
em(글씨 크기를 반영하여 박스크기를 변경해주는 css 크기 단위)이나 ex 단위를 참고하여 그런 것을 이용할 수도 있다.

css 단위 정리 :
- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
- ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
- % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
- pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위

48강) 텍스트를 아이콘 버튼으로

메뉴 링크를 이미지로 스타일 하기 :
- 메뉴바를 만들기 위해서는 텍스트 위에 이미지가 덮여지는 경우이다. 무조건 문서화가 되어 있어야 한다.
- “인라인 블락”으로 입혀주기 때문에 width와 height로는 해결이 되지 않는다.
- 그래서 display: inline-block으로 설정하면 된다.
- 가리는 작업에서 컨텐트인 문자를 삭제하면 문서를 훼손하는 것이므로 문제가 많아서 가려줘야 한다.
텍스트 가려주는 방법 :
- overflow: hidden으로 설정해주자!
하지만 이미지에 붙어 있던 텍스트는 없애지 못하므로, 약간의 꼼수가 들어간다. 기존의 텍스트를 indent 설정으로 밀어버린다.(문단에서 가장 첫문장은 들여쓰기 하는 것 ! )
- text-indent: -999px; // 이것처럼 엄청나게 큰 마이너스 값으로 사용한다.(국룰)

전체 코드 :

.img-btn-menu{
	background-image: url("data: image/svg+xml..");
	background-repeat: no-repeat;
	background-position: left top;
	width: 24px;
	height: 24px;
	display: inline-block;			//  중요! 
	overflow: hidden;				//  중요!
	text-indent: -999px;			//  중요!
}

49강) 콘텐츠 목록 스타일

1) 이미지 태그와 a 태그 구조 변경하기

우리는 이미지에 있는 텍스트를 클릭해서 웹페이지를 이동하는 것이 아니라 이미지를 클릭해서 페이지를 이동해야 한다.
하지만, 현재 html 코드는 a 태그 안에 img 태그가 있기 때문에 a태그를 눌러서 웹페이지가 이동되는 상황이다.
우리가 설계하는 방향이 다르기 때문에 이를 해결해주자!

// 예전 html 코드
<li>
	<a target="_blank" href="menu/detail.html"><img height="100" src="images/17.jpg" alt="딸기청">딸기청</a>
</li>

// 현재 html 코드
<li>
	<img height="100" src="images/17.jpg" alt="딸기청">
	<a target="_blank" href="menu/detail.html">딸기청</a>
</li>

2) html 코드 내에서 div 태그에 class 속성을 부여했는데 그 내부 div 태그에도 다시 class 속성을 부여해야 하는 경우 정리 :

html 코드에서 태그 안에 class를 부여하고 그 내부에 있는 태그에 또 class를 부여하는 것이 안 된다.
- 이유가 있어야한다. 안에 구조가 달라지던가, 태그명이 달라지던가!

3) display: none; 속성

display: none; 속성은 다른 페이지에서도 전역 범위에서 반복적으로 사용되는 경우가 많기 때문에 style.css에서 스타일 객체로 만들어서 html 태그에서는 속성 추가하는 것 처럼 간단히 사용한다.
실습 코드 : style.css

/*=== reset ===============*/
body{
	margin: 0;
}

a{
	text-decoration: none;
}

/*=== display ===============*/
.d-none{
	display : none;
}

index.html

	<nav class="cafe">
		<h1 class="cafe-title">부안에 오면, ~ </h1>
		<div><a class="btn-cafe-menu-all" href="">전체 메뉴</a></div>
		<nav>
			<h1 class="d-none">인기 메뉴</h1>							<!-- d-none 여기 추가 -->
			<ul>
				<li>
					<img height="100" src="images/17.jpg" alt="딸기청">
					<a target="_blank" href="menu/detail.html">딸기청</a>
				</li>
			</ul>
			</h1>
		</nav>
	</nav>

4) CSS의 스타일 객체 중 html 코드에 한 태그의 하위 태그에 적용 시키는 방법 :

스타일 객체에서 >를 이용하여 하위 태그에게도 바로 스타일을 적용 시킬 수 있다.

.top-menu{							// class가 top-menu인 것에 스타일 적용 
}
	.top-menu > ul{					// class가 top-menu인 것 중 하위 태그 중에서 ul에 스타일 적용 
	}
		.top-menu > ul > li{		// class가 top-menu인 것 중 하위 태그 중에서 ul의 하위 태그인 li 태그에 스타일 적용
		}

5) CSS 버전 차이 : css 1.0 // css 2.0 // css 3.0

css 1.0 : text(정렬, 폰트, 텍스트 색깔 등) 위주
css 2.0 : 어플리케이션 레이아웃 중에서 box(padding) 위주
css 3.0 : 어플리케이션 레이아웃 중에서 flex/ grid(display) 추가

6) 과거 방식을 만들어보는 목록 스타일 :

메뉴 항목을 수평으로 배치하는 방법
float : left; 속성 이용 : 원래는 블럭이 하부구조로 힘을 받는데 float 속성을 이용하면 이것을 강제로 왼쪽에서 오른쪽으로 수평으로 배치가 가능하다.
최근의 해결 방법 : display : flex;

.top-menu{						
}
	.top-menu > ul{					
		margin : 0;					// ul 태그의 margin과 padding을 0으로 만들어 준다. 
		padding: 0;
			
	}
		.top-menu > ul > li{		
			float : left; 				// 나중에는 이러한 부분을 display : flex로 모든 것이 해결된다!!! 
			list-style-type: none;		// 원래 list 아이템의 스타일은 앞에 .이 생기는데 이것을 없애주는 속성도 있다. 
				
		}

7) li 박스 크기 지정하기 :

.top-menu{						
}
	.top-menu > ul{					
		margin : 0;					// ul 태그의 margin과 padding을 0으로 만들어 준다. 
		padding: 0;
			
	}
		.top-menu > ul > li{		
			float : left; 				// 나중에는 이러한 부분을 display : flex로 모든 것이 해결된다!!! 
			list-style-type: none;		// 원래 list 아이템의 스타일은 앞에 .이 생기는데 이것을 없애주는 속성도 있다. 
			
			width : 100px;				// li 박스 크기 지정
			height : 100px;				
		}

8) 이미지 크기를 li 박스 크기에 맞추기 !

background는 아니지만 똑같이 크기 일정하게 변환

index.css

.top-menu{						
}

.top-menu > ul{					
	margin: 0;	// ul 태그도 margin과 padding을 0으로 만들어 준다. 
	padding: 0;
	border: 1px solid blue;	// 이렇게만 쓰면 부모 태그인 ul 태그에 엉망인 상태로 박스에 색이 입혀진다.  
					// 따라서, display : inline-block; 이것이 필요하다!
}

.top-menu li{			// 원래는 .top-menu>ul>li{ 이지만 사이에 태그가 한가지 종류 밖에 없으면	
							// .top-menu li{ 이렇게 가운데 경로는 생략 가능!		
									
	float : left;			// 나중에는 이러한 부분을 "display : flex"로 모든 것이 해결된다!!! 
	list-style-type: none;		// 원래 list 아이템의 스타일은 앞에 .이 생기는데 이것을 없애주는 속성도 있다. 
	
	width : 100px;			// li 박스 크기 지정
	height : 100px;				
	
	border: 1px solid red;		// 이렇게만 쓰면 li 태그에 엉망인 상태로 박스에 색이 입혀진다.  
}

.top-menu li>img{			// 박스 크기에 맞게 사용하기 위해서는 "object-fit: cover;" 가 필요한데, 이것은 부모 태그에서는 안 먹힌다.
								// 직접적으로 크기의 변화를 적용하는 "img 태그(자식 태그)"에 적용해야 한다.
									  
	width : 100px;			// image 크기도 지정해준다! 
	height : 100px;				
									// li 태그 내부에 적용!!!!
	object-fit: cover; 			// 이미지 크기를 li 박스 크기에 비율을 맞추면서 커버를 하려면(background는 아니지만 똑같이 크기 일정하게 변환)
}

style.css

/*=== reset ===============*/
body{
	margin: 0;
}

a{
	text-decoration: none;
}

/*=== display ===============*/
.d-none{
	display : none;
}

.d-inline-block{		// 부모 태그인 ul 태그에 적용 시키기 위해서 필요하다.
	display : inline-block;	// (이것도 여러번 쓰인다!)
}

index.html
index.html에 “d-inline-block”을 2번 넣어주면 부모와 알맹이가 따로따로 돌지 않고 제대로 출력된다.

	<nav class="cafe">
		<h1 class="cafe-title">부안에 오면, ~ </h1>
		<div><a class="btn-cafe-menu-all" href="">전체 메뉴</a></div>
		<nav class="top-menu d-inline-block">				<!-- d-inline-block를 여기에도 추가!!!! -->
			<h1 class="d-none">인기 메뉴</h1>							
			<ul class="d-inline-block">						<!-- d-inline-block 여기 추가 -->
				<li>
					<img height="100" src="images/17.jpg" alt="딸기청">
					<a target="_blank" href="menu/detail.html">딸기청</a>
				</li>
			</ul>
			</h1>
		</nav>
	</nav>

9) li 태그 안에 있는 a태그도 지정하기 :

현재는 a태그가 공간이 없어서 삐져 나왔다.. 이것도 수정해줘야 한다.

index.css(과거 방식)

.top-menu{						
}

.top-menu > ul{					
	margin: 0;	
	padding: 0;
	border: 1px solid blue;	// 이렇게만 쓰면 부모 태그인 ul 태그에 엉망인 상태로 박스에 색이 입혀진다.  
					// 따라서, display : inline-block; 이것이 필요하다!
}

.top-menu li{			
									
	float : left;			// 나중에는 이러한 부분을 "display : flex"로 모든 것이 해결된다!!! 
	list-style-type: none;		// 원래 list 아이템의 스타일은 앞에 .이 생기는데 이것을 없애주는 속성도 있다. 
	
	width : 100px;			
	height : 100px;				
	
	border: 1px solid red;		
}

.top-menu li>img{			
									  
	width : 100px;			
	height : 100px;				
									// li 태그 내부에 적용!
	object-fit: cover; 			// 이미지 크기를 li 박스 크기에 비율을 맞추면서 커버를 하려면(background는 아니지만 똑같이 크기 일정하게 변환)
}

.top-menu li>a{			
	display : inline-block;								  
	width : 100px;					//  크기를 적용 시키기 위해서 display 속성이 필요하다!
	height : 100px;					//  이것만 있으면 인라인 블락으로 인식하기 때문에 크기가 적용돠지 않는다. 
	
	border : 1px solid green;		// 이것은 크기가 적용되었는지 확인용!
	text-align: center; 
	line-height: 100px; 			// 글씨가 길어지면 옆 글씨가 잘리는 것을 방지
}

index.css(최근 방식) : 다음 코드가 추가된다.
- display : flex;
- align-items : center;
- justify-content : center;

.top-menu{						
}

.top-menu > ul{					
	margin: 0;	
	padding: 0;
	border: 1px solid blue;	// 이렇게만 쓰면 부모 태그인 ul 태그에 엉망인 상태로 박스에 색이 입혀진다.  
					// 따라서, display : inline-block; 이것이 필요하다!
}

.top-menu li{			
									
	float : left;			// 나중에는 이러한 부분을 "display : flex"로 모든 것이 해결된다!!! 
	list-style-type: none;		// 원래 list 아이템의 스타일은 앞에 .이 생기는데 이것을 없애주는 속성도 있다. 
	
	width : 100px;			
	height : 100px;				
	
	border: 1px solid red;		
}

.top-menu li>img{			
									  
	width : 100%;				// 부모 태그로부터 영향을 받아서 %로 값을 나타낸다.
	height : 100%;				
									// li 태그 내부에 적용!
	object-fit: cover; 			// 이미지 크기를 li 박스 크기에 비율을 맞추면서 커버를 하려면(background는 아니지만 똑같이 크기 일정하게 변환)
}

.top-menu li>a{									  
	width : 100px;					
	height : 100px;					
	border : 1px solid green;
	text-align: center; 			// 글씨의 가운데 정렬 역할을 해준다. 
	
	display : flex;					// 비율을 알아서 맞춰주는 역할을 해준다!
	align-items : center;
	justify-content : center; 	// 얘가 전체 가운데 정렬 역할을 해준다. 
}

차이점 알기!! :
- text-align: center; // 글씨의 가운데 정렬 역할을 해준다.
- justify-content : center; // 얘가 전체 가운데 정렬 역할을 해준다.

10) li 태그 안에 있는 a태그 숨기기 :

화면에서 안보이게 하는 방법 : 클러킹?
- 화면에서는 안보이게 잘라냈지만 실제로는 숨겨야 한다.

index.css(최근 방식) : 다음 코드가 추가된다.

.top-menu{						
}

.top-menu > ul{					
	margin: 0;	
	padding: 0;
	border: 1px solid blue;	
	
	overflow: hidden; 			// 이걸 쓰면, 아까 클러킹한 배경을 숨겨 놓는다.
}

.top-menu li{			
									
	float : left;			
	list-style-type: none;		
	
	width : 100px;			
	height : 100px;				
	
	border: 1px solid red;		
}

.top-menu li>img{			
									  
	width : 100%;			
	height : 100%;				
									
	object-fit: cover; 			
}

.top-menu li>a{									  
	width : 100px;					
	height : 100px;					
	border : 1px solid green;
	text-align: center; 			
	
	display : flex;					
	align-items : center;
	justify-content : center; 
	
	background-color: #0006;		// 화면에서 안보이게 하는 방법 : 클러킹(박스 뒤에 배경) 
	color: #fff;
}

11) li 태그의 간격 벌리기와 ul 박스 스타일 마무리하기.

index.html ```html
부안에 오면, ~

전체 메뉴
인기 메뉴
- 딸기청
</h1>

---

- index.css

```css
.top-menu{						
}

.top-menu > ul{					
	margin: 0;	
	padding: 0;
	border: 1px solid blue;	
	
	overflow: hidden; 			// 이걸 쓰면, 아까 클러킹한 배경을 숨겨 놓는다.
}

.top-menu li{			
									
	float : left;			
	list-style-type: none;		
	width : 100px;			
	height : 100px;				
	border: 1px solid red;		
	
	margin-left: 20px;			// li 태그에 마진 추가!
}

.top-menu li.first{			// li 내부의 태그들 중 첫 번째 태그에 속성 추가!

	margin-left: 24px;			
}

.top-menu li>img{			
									  
	width : 100%;			
	height : 100%;				
									
	object-fit: cover; 			
}

.top-menu li>a{									  
	width : 100px;					
	height : 100px;					
	border : 1px solid green;
	text-align: center; 			
	
	display : flex;					
	align-items : center;
	justify-content : center; 
	
	background-color: #0006;		// 화면에서 안보이게 하는 방법 : 클러킹(박스 뒤에 배경) 
	color: #fff;
}

pseudo 코드 적용 : 미리 정해진 위치의 태그가 있다.(핵심!!)**
- 구글에 “mdn pseudo classes” 검색하여 찾아서 사용하자!!
- html 태그에 따로 class를 추가하지 않아도 된다.
- first-child : li 내부의 태그들 중 첫 번째 태그에 속성 추가!
- last-child : li 내부의 태그들 중 마지막 태그에 속성 추가!
index.css

.top-menu{						
}

.top-menu > ul{					
	width: 1000px;				// 상품수가 많아지면 상품이 아래로 내려가서 옆 스크롤로 만들기 위해 너비를 크게 바꿔준다.
	
	margin: 0;	
	padding: 0;
	border: 1px solid blue;	
	
	overflow: hidden; 			// 이걸 쓰면, 아까 클러킹한 배경을 숨겨 놓는다.
}

.top-menu li{			
									
	float : left;			
	list-style-type: none;		
	width : 100px;			
	height : 100px;				
	border: 1px solid red;		
	
	margin-left: 20px;			// li 태그에 마진 추가!
}

.top-menu li:first-child{		// li 내부의 태그들 중 첫 번째 태그에 속성 추가!

	margin-left: 24px;			// 결론 : li 태그 중 내부 태그 사이 간격은 20px이고 
									// 박스 외벽과 가장 앞 태그 사이는 24px 간격이다.    
}

.top-menu li>img{			
									  
	width : 100%;			
	height : 100%;				
									
	object-fit: cover; 			
}

.top-menu li>a{									  
	width : 100px;					
	height : 100px;					
	border : 1px solid green;
	text-align: center; 			
	
	display : flex;					
	align-items : center;
	justify-content : center; 
	
	background-color: #0006;		// 화면에서 안보이게 하는 방법 : 클러킹(박스 뒤에 배경) 
	color: #fff;
}

12) 상태에 따른 스타일 :

예전과 자바스크립트만 이용할 줄아는 사람은 상태 별로 클래스를 별도로 준비하거나 사진도별도로 준비해야 했다.
하지만, 이를 자바스크립트에서 처리하면 코드가 매우 복잡해진다. 따라서, CSS에서 Trigger를처리하기 위해서 pseudo 코드가 필요하다.
index.css

.top-menu{						
}

.top-menu > ul{					
	width: 1000px;				// 상품수가 많아지면 상품이 아래로 내려가서 옆 스크롤로 만들기 위해 너비를 크게 바꿔준다.
	
	margin: 0;	
	padding: 0;
	border: 1px solid blue;	
	
	overflow: hidden; 			// 이걸 쓰면, 아까 클러킹한 배경을 숨겨 놓는다.
}

.top-menu li{			
									
	float : left;			
	list-style-type: none;		
	width : 100px;			
	height : 100px;				
	border: 1px solid red;		
	
	margin-left: 20px;			// li 태그에 마진 추가!
}

.top-menu li:first-child{		// li 내부의 태그들 중 첫 번째 태그에 속성 추가!

	margin-left: 24px;			// 결론 : li 태그 중 내부 태그 사이 간격은 20px이고 
									// 박스 외벽과 가장 앞 태그 사이는 24px 간격이다.    
}

.top-menu li>img{			
									  
	width : 100%;			
	height : 100%;				
									
	object-fit: cover; 			
}

.top-menu li>a{									  
	width : 100px;					
	height : 100px;					
	border : 1px solid green;
	text-align: center; 			
	
	display : flex;					
	align-items : center;
	justify-content : center; 
	
	background-color: #0006;		// 화면에서 안보이게 하는 방법 : 클러킹(박스 뒤에 배경) 
	color: #fff;
}
					
					// pseudo 코드!!
.top-menu li:hover>a{			
	/*margin-top: -50px; 마진탑은 background는 아래 깔리고 컨텐츠가 위로 올라간다.*/
	position: relative;				// 따라서, position 속성과 top 속성을 이용하자!
	top: -100%;
}

13) 슈도 클래스 :

상태가 바뀌면 스타일을 적용해주기 때문에 스타일을 동적으로 만드는 역할을 함.
- mdn이 제공해주는 슈도 클래스는 몇개 없어서 꼭 찾아보기!!
- 자바스크립트를 이용하는 경우 코드가 복잡해지고 Inline style을 추가해줘야 한다.

슈도 클래스는 “:”를 의미하고 트리거가 제공하는 이벤트는 “hover”이다.

.top-menu > ul > li > a:hover{
		margin-top : 0px;
}

앞으로 할 것 : 배치하기!

이전TIL-9주차 코드

다음HTML,CSS - CSS Study(2)