https://www.w3schools.com/css/css_howto.asp
[ CSS – How To ]
오늘은 ( External CSS ) 방법으로 해볼 거임
※ 어제 했던 방법은 ( Internal CSS )임
어제 배웠던 내용(index.html)을 그대로 복사하여, 새로 만듦
@charset "UTF-8";
@import url('<https://fonts.googleapis.com/css2?family=Monoton&display=swap>'); /* Monoton(FONT) - 복사·붙여넣기 */
.flex{ /* 내가 flex라는 class 생성 => 밑에서 적용하여 활용함 */
display: flex; /* Flex Container를 생성 => 기본 : 한 줄의 가로 형태로 배치 */
}
.column{ /* 내가 column이라는 class 생성 => 밑에서 적용하여 활용함 */
flex-direction: column; /* Flex Container의 주 축(main axis)을 세로(열) 방향으로 설정 => 여러 줄의 세로 형태로 배치 */
}
.between{ /* 내가 between이라는 class 생성 => 밑에서 적용하여 활용함 */
justify-content: space-between; /* Flex Container 내에서, Flex Items를 서로간의 사이사이에 여유 공간을 두고 배치 */
}
.center{ /* 내가 center라는 class 생성 => 밑에서 적용하여 활용함 */
justify-content: center; /* Flex Container 내에서, Flex Items를 정중앙에서부터 배치 */
}
*{ /* (*) : 모든 태그 */
margin: 0;
padding: 0;
box-sizing: border-box; /* 테두리(border)를 기준으로 박스의 크기(box-sizing)를 정함 */
}
ul{
/* list-style: circle; list item의 검정색 동그라미(마크)를 흰색 동그라미로 변경 */
list-style: none; /* list item의 검정색 동그라미(마크)를 아예 없애버림 */
}
h1{
display: none; /* h1을 만들어 놓고, 왼쪽과 같이 숨기는 이유 -> 크롬 창에서 단순히 Outline을 확인하기 위해 만든 거임 */
}
a{
text-decoration: none; /* text-decoration(밑줄, 윗줄, 중간줄 등을 설정) => NAVER 글자 링크 밑에 있는, 밑줄이 없어짐 */
color: black; /* [1] : NAVER 글자 링크의 색상 : 검정 cf.) 기타 그 외 <a> 태그에 해당하는 모든 글자들 : 검정 */
}
#logo>.wrap a{
color: red; /* [2] : NAVER 글자 링크의 색상 : 빨강 ※ [2]가 [1]에 우선함 (디테일하게 콕 집어서 설정했기에) */
}
#header>.wrap {
width: 1168px;
height: 69px;
/* background-color: red; */
/* margin: 0 auto 0 auto; [상·우·하·좌] : (상·하)의 margin을 0으로 설정 / (우·좌)의 margin을 똑같이 배분 => 가운데 정렬 */
margin: 0 auto; /* [상·우·하·좌] : (상&하 - 한 세트임) (우&좌 - 한 세트임) => 상기와 동일한 표현 */
border-bottom: 1px solid #e9e9e9; /* [ solid -> 실선 ] / [ #e9e9e9 -> 은은한 회색 ] */
}
#logo>.wrap{
font-family: 'Monoton', cursive; /* Monoton(FONT) - 복사·붙여넣기 */
font-weight: bold;
font-size: 32px;
}
#menu>.wrap ul li a{
padding: 0.3em 0.8em 0.5em; /* [상·우·하·좌] : (상·하)의 padding을 각각 0.3em, 0.5em으로 설정 / (우·좌)의 padding을 둘 다 0.8em으로 설정 */
} /* cf.) [ 1em = 16px ] / px보다 em의 호환성이 더 좋기에, px보다는 em의 사용을 장려함 */
#user>.wrap form{
border: 1px solid #a9a9a9; /* [ #a9a9a9 -> 조금 진한, 은은한 회색 ] */
height: 30px;
}
#user>.wrap form input{ /* 검색 돋보기(ICON)을 제외한, 검색 창 부분 */
padding: 0.3em 0.8em;
border: none; /* 테두리를 없앰 */
/* outline: none; 클릭 시, 테두리가 진한 검정색으로 강조되는 효과를 없앰 */
width: 154px;
height: 28px;
font-size: 14px;
display: inline-block; /* [ display: inline ] : 한 줄에 다른 요소들을 나란히 배치 / 그러나, width와 height를 지정해도 반영되지 않음 + margin과 padding 지정 시, 좌우 간격만 반영되고 상하 간격은 반영되지 않음 */
/* [ display: block ] : 한 줄에 하나의 요소만 배치 / width, height, margin, padding를 지정한 것이 모두 반영됨 */
/* [ display: inline-block ] : 한 줄에 다른 요소들을 나란히 배치 / width, height, margin, padding를 지정한 것이 모두 반영됨 */
}
#user>.wrap form button{ /* 검색 돋보기(ICON) */
background: none;
border: none;
width: 30px;
height: 28px;
color: #777;
display: inline-block;
}
#user>.wrap a.btn-login{
border: 1px solid #e9e9e9;
margin-left: 20px;
background-color: #252525; /* '로그인' 버튼의 배경색 */
color: #fff; /* '로그인' 버튼의 글자색 */
font-size: 14px;
width: 77px;
height: 30px;
text-align: center; /* 가로로 가운데 정렬 */
line-height: 30px; /* line-height : 줄 높이 => 세로로 가운데 정렬 */
}