<목차>
1) CSS 복습
1-1) CSS 적용 방법
1-2) element 위치 조절하는 방법
1-3) 추가 속성 체크
2) 추가 skill
2-1) 속성 선택자
2-2) input[id=" "]:checked { }
2-3) display: none;
2-4) 인접 접근자 +
2-5) :nth-child()
2-6) name 속성
2-7) checked="checked"
2-8) transform / transition
3) 햄버거 메뉴
4) 코드 실습
1) CSS 복습
1-1) CSS 적용 방법
- head 영역에 style 태그 추가
- inline style
- link 태그를 이용해 외부 파일 연결 (>> 대부분의 개발자가 가장 일반적으로 많이 쓰는 방법)
>> 각 방법별 세부사항은 이전 블로그 글( "CSS 기초 - 적용 방법 및 선택자, 주요 속성" ) 참조
1-2) element 위치 조절하는 방법
- display: inline-block;
- float 속성: left, right
- position 속성: relative, absolute, fixed >> top / right / bottom / left / z-index
>> 각 방법별 세부사항은 이전 블로그 글( "CSS 기초(2) - 위치 조절 방법 및 기타 사항" ) 참조
1-3) 추가 속성 체크
- margin: 0 auto; → 해당 태그 영역을 가운데 정렬해 줌.( 해당 코드는 "margin: 0 auto 0 auto;" 와 동일한 의미 )
- list-style: none; → 리스트의 동그라미 부분이 사라짐.
- width: 100%; → block 속성처럼 한 줄을 전부 사용하겠다는 의미.
- max-width: OOOOpx; → 가장 큰 넓이는 해당 지정 넓이로 고정되며, 줄어드는 것은 유연하게 변동됨!! >> 스크롤 이슈 해결 목적으로 사용함!
- text-decoration: none; → <a> 태그를 통해 링크를 걸면 밑줄이 발생하는데 이 CSS 속성을 사용해서 밑줄 제거 가능.
- color: ○○○; → 폰트 컬러 변경.
- font-size: ○○px; → 폰트 크기 변경.
- font-weight: bold; → 폰트 굵기 굵어짐.
- text-align: ○○; → 글자 정렬.( left, right, center 등 )
- opacity: ○○; → 투명도 주기.( 단점 : 글자까지 투명해짐. 글자가 있을 경우, 다른 방법으로 background에만 투명도를 줘야 함. )
- background: rgba(0, 0, 0, 0.5); → 배경만 지정된 투명도(네 번째 요소값)만큼 투명하게 해 줌.( 글자의 경우, 지정한 폰트 색깔에 맞게 그대로 표시됨. 여기서 첫번째, 두번째, 세번째 요소값은 우리가 색깔 지정을 할 시 사용하는 rgb 값에 해당. )
- overflow: hidden; → 원본 이미지의 크기를 해당 태그에서 지정한 크기 만큼의 영역만 보여주도록 나머지 오버되는 부분은 가려줌!
- min-height: ○○○○px; → 최소 높이를 지정해 주는 것으로 해당 element에 텍스트가 없어도 기본적으로 지정한 height만큼 영역을 자동으로 차지하며, 이와 더불어 만일 텍스트가 지정한 height를 넘어갈 시 가변적으로 해당 element 영역의 크기를 늘려줌.
- clear: both; → 이를 사용하면 상위 element의 속성을 전부 무시함.( 일반적으로 footer 영역에서만 사용함 )
- background: url(~) ○○px ○○px no-repeat; → background 속성에 color 대신 url을 써서 해당 이미지를 가져오거나 지정한 크기 순서대로 width, height 조절 가능하며, 남는 공간에 자동으로 채워지는 이미지들을 반복시키지 않기 위해 "no-repeat" 옵션 또한 사용 가능함.
- border-radius; → 일반적으로 a 태그의 사각형 혹은 버튼 높이의 반 값(1/2)만 넣어서 둥글게 깎아줌.
- border( border-top / border-left / border-right / border-bottom ): ○○px solid(dotted 등) ○○○○(color) → 테두리를 지정한 조건에 맞게 만들어 줌. (border는 전체를 지칭하고 top / left / right / bottom 방향으로 따로 그리고 세트*로 설정 가능하며, "none" 값으로 테두리를 없앨 수도 있음!! )
※ rgb는 각각 0~255의 값을 지정할 수 있음 → 이는 이전에 배웠던 16진수와 관계된 것으로 색 지정 시 사용하는 #○○○○○○ 형식의 자리 하나하나가 각각 16개의 경우의 수를 가지기에 이를 rgb로 치환할 시 2개씩 묶여 하나당 256개(16 * 16 = 256)의 값을 지정 가능함!!
2) 추가 skill
2-1) 속성 선택자
이번에 알아볼 내용은 css 속성 선택자이다. 지금껏 우리가 사용해 왔던 선택자들을 살펴보면 다음과 같다.
- * : 모든 element를 선택하는 선택자
- element name (div, body, a, ul, li, ... ) : 직접적으로 특정 element를 그대로 적는 방식의 선택자.
- . : class를 부여해준 태그를 선택하는 선택자.
- # : id를 부여해준 태그를 선택하는 선택자.
속성 선택자는 주로 input 박스를 조작할 때 사용하게 되는데, "#id 명"으로 태그를 선택할 시 동일한 id 명을 가진 모든 태그들에 해당 CSS가 적용되는 이슈가 발생함.
input[id="icon"] {
background: red;
}
위에 적혀 있는 것은 모든 <input> 태그 중에서 id가 "icon"인 경우에만 해당 속성을 부여하겠다는 의미로 해석할 수 있음.
기존에 사용해 왔던 다른 선택자들과 비교해 보면서 그 뜻을 좀 더 정확히 알아보도록 하자.
- input { } : css 파일 상에 존재하는 모든 html 태그 중에서 모든 <input> 태그에게 속성값 부여.
- #icon{ } : 모든 태그 중에서 "icon"이라는 id를 가진 태그에만 속성값 부여.
- input[id="icon"] { } : 모든 태그 중에서 id가 "icon"인 <input> 태그에만 속성값 부여.
이렇게 속성 선택자를 사용하게 되면 동일한 id를 가지고 있는 서로 다른 태그들을 대상으로 css 속성을 적용할 시 발생하는 이슈들을 해결할 수 있음!!
2-2) input[id=" "]:checked { }
해당 속성에 대해서는 아래의 코드를 살펴 보면서 이해해보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
check
</label>
</body>
</html>/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"]:checked {
width: 50px;
}
input[id="icon"] {
width: 10px;
}
input[id="icon"] 선택자 끝에 " :checked "를 추가였을 때 나타나는 변화에 대해 이야기해 보고자 한다.
위의 코드를 실행한 결과는 아래와 같다.
그림을 통해 알 수 있듯이 선택자에 ":checked"를 써줌으로써 체크가 되었을 때의 css 스타일과 체크가 되어 있지 않았을 때의 css 스타일을 다르게 부여할 수 있다.
즉, 해당 효과를 사용함으로써 체크가 되었을 때와 되지 않았을 때의 내용을 구분할 수 있게끔 할 수 있다.
그렇다면 앞에서 배운 display:none;과 input[id="icon"]:checked { }를 동시에 사용하면 어떤 효과를 부여할 수 있을까?
특정 element를 display:none;을 사용해 화면 상에서 가려둔 상태에서 checked를 했을 때 display:none;을 풀어줌과 동시에 애니메이션 효과를 주어서 동적으로 움직이는 것처럼 보이게끔 할 수 있는 등 여러 속성들을 융합해 다양하게 응용해 볼 수 있다.
2-3) display: none;
앞서 우리는 display: inline; , display: block; , display: inline-block; 을 배웠고 사용해 왔다.
이번에 알아볼 내용은 display: none; 이 어떠한 효과를 주는가에 대한 것이다.
display: none; 은 단어 뜻 그대로 "없다"는 의미이다. 우선 아래 코드를 보면서 이해해 보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
check
</label>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"] {
display: none;
}
display: none; 을 적용하기 전에는 우리가 알던 그대로 <input>에 의해 생성된 checkbox와 <label>에 의해 생성된 문자가 화면 상에 나타나고 있다.
여기서 display: none; 을 input[id="icon"]에 적용하게 되면 checkbox가 사라지는 것을 확인할 수 있다.
display: none; 은 화면에서 안 보이도록 하는 기능을 가지고 있다.
여기서 주의해야 할 점은 삭제와는 다르다는 것이다.
해당 input 박스는 눈으로 보이지 않을 뿐, 삭제된 것이 아니다.
input 박스를 가지고는 있지만 우리 눈에 안 보이게끔만 처리를 하는 것이다.
실제로 우리가 check 글자를 클릭할 때마다 input 박스의 체크 표시는 계속 동작하고 있다.
즉, element가 화면 상에 render가 안됐을 뿐, 실제 기능적으로는 살아있고 동작되고 있는 것이다.
2-4) 인접 접근자 +
인접 접근자는 우리가 사용해 왔던 접근자 ">"와는 다르게 "+" 기호를 이용해 사용한다. 아래의 코드를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
check1
</label>
<label for="icon">
check2
</label>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"]:checked {
display:none;
}
input[id="icon"] + label {
background:red;
}
위에 나와있는 html 코드를 보면 <input> 태그 아래에 두 개의 <label> 태그가 존재해서 각각 check1과 check2라는 텍스트가 쓰여 있고, 첫 번째 <label>에만 css 효과가 부여된 것을 확인할 수 있다.
input[id="icon"] + label {
background: red;
}
인접 접근자 "+"는 위와 같이 작성하는데 내가 선택한 input[id="icon"] 태그 바로 아래에 있는(같은 선상에 있는) 태그에게 css를 주고 싶을 때 사용한다.
여기서 주의해야 할 점은 "+" 접근자가 사용된 <input> 태그와 <label> 태그가 부모, 자식 관계가 아닌 같은 레벨에 있다는 사실이다.
그렇다면 label { background: red; } 형태로 쓰지 않고 위와 같이 인접 접근자를 사용해서 쓰는 이유는 무엇일까?
css를 아래와 같이 작성할 경우를 살펴보자.
label {
background: red;
}
인접 접근자를 사용하여 input[id="icon"] + label { } 형태가 아닌, label { } 만을 썼을 경우, 위에서 보이는 것처럼 모든 label 태그에 효과가 적용된 것을 확인할 수 있다.
즉, 인접 접근자 "+"를 사용해 <input> 태그 바로 아래에 있는 <label>만을 선택하고 싶을 때 사용할 수 있다.
인접 접근자는 input[id="icon"]:checked + label { } 의 형태로 많이 사용하는데 이는 해당 input 박스에 체크가 되었는지 안 되었는지에 따라 css를 다르게 적용하기 위함이다.
즉, checked를 했을 때와 안했을 때를 구분하여 css를 적용하기 위해 input + label 형태로 접근하는 것이다.
2-5) :nth-child()
nth-child()에 대한 개념을 설명하기 위해 다음과 같은 html 코드가 작성되어 있다고 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
<span></span>
<span></span>
<span></span>
</label>
</body>
</html>
위에 제시되 html 코드를 토대로 css를 작성한다고 했을 시 해당 코드 안에 존재하는 <span> 태그들에 대해 각각 css를 다르게 부여하고 싶은 경우가 발생할 수 있다.
이럴 때 우리는 여태까지 각각의 <span> 태그에 id 혹은 class를 지정하여 css를 부여하였다.
해당 방법 역시 하나의 방법이지만 너무 많은 id와 class를 부여하여 조금은 복잡해질 가능성이 있다.
이러한 것을 해결하기 위해 사용하는 것이 바로 :nth-child( )이다. 아래 작성된 css를 보자.
input[id="icon"] + label > span:nth-child(1) {
/* css 입력 */
}
input[id="icon"] + label > span:nth-child(2) {
/* css 입력 */
}
input[id="icon"] + label > span:nth-child(3) {
/* css 입력 */
}
<input> 태그 아래에 있는 <label> 태그 안에 있는 <span> 중에 첫 번째 <span>을 선택하여 속성을 부여하고 싶을 때, input[id="icon"] + label > span:nth-child(1)을 사용할 수 있다.
nth-child( ) 괄호 안에 숫자를 부여해 몇 번째 태그에 속성을 부여할 것인지를 지정할 수 있는데, nth-child(n)이라고 작성한다면
n번째 태그에 속성을 부여하겠다는 뜻이다.
이제 nth-child( )를 이용해서 태그 하나하나에 id 혹은 class를 부여하지 않아도 같은 레벨의 같은 태그들에게 각각 서로 다른 속성을 부여할 수 있다.
2-6) name 속성
name 속성은 input 태그 등에 대해 그룹화 용도로 많이 사용됨.
input의 경우, type="radio"는 하나의 요소만 선택 가능하며, 하나를 새로 선택하면 기존에 선택되어 있던 것이 체크가 풀림( 원천적으로 중복 선택 불가 ) / type="checkbox"는 하나의 요소가 이미 선택되어 있는 상황에서 새로운 요소를 중복하여 선택 가능한 특징을 지님!
특히 name은 class가 단순히 중복하여 속성값을 설정할 수 있는 선택자인 반면, 위와 같이 그룹화 용도로 사용되는 중요 속성에 해당!!
2-7) checked="checked"
checked=”checked” >> input 태그에서 해당 속성이 지정된 태그에 대해 default 값으로 지정하는 역할을 수행함!!
2-8) transform / transition
/* 시작지점이 해당 영역의 왼쪽 상단이 기준이기에 정확히 50% 위치에 오지 않아 transform을 써서 아래와 같이 해당 영역의 절반 정도 만큼을 위로 올려서 정가운데에 위치하게 할 수 있음 */
#icon + label > span:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
/* 위의 태그와 반대로 bottom을 기준으로 정중앙에 오게 하는 코드 */
#icon:checked + label > span:nth-child(3) {
bottom: 50%;
transform: translateY(50%);
}.box {
position: absolute;
width: 500px;
height: 500px;
background: #999;
left: -500px;
}
#tab1:checked ~ .con1 {
left: 0;
/* 위에서 사라지게 한 element를 0.8초의 시간을 거쳐 서서히 다시 보이게 하는 코드 */
transition: all 0.8s;
}
3) 햄버거 메뉴
이번 포스팅에서는 css를 활용해 메뉴바를 만들어 보고자 한다. 웹페이지 상에서 마우스 커서에 반응하여 움직이는 메뉴바를 많이 본 적이 있을 것이다.
아래와 같이 생긴 메뉴바 혹은 버튼을 일명 "햄버거 메뉴"라고 하는데 이 버튼을 클릭했을 시 세부 메뉴 항목들이 나올 수 있게끔 html과 css 코드를 작성해 보고자 한다.
위의 그림처럼 메뉴바를 클릭했을 때 세부 메뉴 영역이 표출되면서 메뉴바의 모양이 X 모양으로 변하는 효과를 넣어보고자 한다.
과정을 따라가면서 새롭게 등장하는 css 속성들은 그때 그때 언급하면서 알아가보도록 하자.
우선 햄버거 메뉴 모양을 만들어야 하는데, 필자는 다음과 같은 과정을 통해 만들었다.
div 영역을 만들고 <span> 태그를 이용해 height가 5px인 선들을 만들어서 각각의 위치에 표현하고자 한다.
여기서 <label> 태그와 <span> 태그는 inline 속성이므로 height와 width를 지정하려면 먼저 display: block;을 줘야 함을 유념하자.
html 코드와 css 코드를 작성해 보면 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\css\index.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon"> <!-- label 태그는 inline 속성을 가짐 -->
<span></span>
<span></span>
<span></span>
</label>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"] {
display: none;
}
input[id="icon"] + label {
display:block;
width: 60px;
height: 40px;
cursor:pointer;
}
input[id="icon"] + label > span {
display:block;
height:5px;
width:100%;
border-radius:30px;
background: black;
}
<input> 태그 바로 아래에 위치한 <label> 태그에 속성을 부여하기 위해 인접 접근자 "+"를 사용하여 나타냈고, <span> 태그를 이용해 선을 표현하기 위해 display:block;으로 높이와 넓이를 조절하였다.
또한 선의 양끝 모서리가 동그랗게 깎인 것을 확인할 수 있는데 해당 효과는 border-radius: 30px;을 이용해 부여한 것이다.
cursor:pointer;를 이용해서는 <label> 태그 영역에 마우스 커서를 갖다 댔을 때, 해당 영역이 클릭 가능한 영역이라는 것을 드러내기 위해 커서의 모양을 바꿔주는 효과를 부여했다.
이제 해당 선들을 일정하게 떨어뜨려 줘야 할 것이다. css 내용을 조금 더 추가해 보자.
/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"] {
display: none;
}
input[id="icon"] + label {
display:block;
width: 60px;
height: 40px;
cursor:pointer;
position:relative;
}
input[id="icon"] + label > span {
display:block;
height:5px;
width:100%;
border-radius:30px;
background: black;
position:absolute;
}
input[id="icon"] + label > span:nth-child(1) {
top:0;
}
input[id="icon"] + label > span:nth-child(2) {
top:50%;
transform:translateY(-50%);
}
input[id="icon"] + label > span:nth-child(3) {
bottom:0;
}
위의 css 내용을 살펴보면 다음과 같은 내용을 찾아볼 수 있다.
<label> 태그에는 position:relative;를 부여했고, <label> 태그 안에서 각각의 선들로 표현된 <span> 태그에는 position:absolute;를 부여하였다.
이 관계는 하나의 공식처럼 기억하도록 하자.
부모 태그에 position:relative; , 자식 태그 안에 position:absolute;가 있을 경우,
absolute가 적용된 자식 태그가 <body> 영역 안에서 움직이는 것이 아닌 부모 태그 영역 안에서 움직이게 된다.
즉, absolute를 부모 태그 영역 안에서 움직이고 싶은 경우,
부모 태그에 relative를, 자식 태그에 absolute를 선언하여 css를 적용하면 된다.
input[id="icon"] + label > span:nth-child(2) { } 에 작성되어 있는 transform:의 경우, 태그를 변형할 때 주로 사용하는 css이다.
태그를 비틀거나 구부리거나 돌리고자 할 때 사용한다.
여기에서는 translateY(-50%)에 의해 위치를 변경하게 되었는데 자기 크기의 50%만큼 위로 올라가게 되었다.
이로써 input[id="icon"] + label > span:nth-child(2) { top:50%; translateY(-50%) } 에 의해
두 번째 <span> 태그는 정가운데에 위치하게 되고
첫 번째 <span> 태그와 세 번째 <span> 태그는 top:0; , bottom:0; 에 의해 각각 위와 아래에 위치하게 되었다.
+) transform:translate( ) 속성에 대해 조금 더 알아보자.
이 속성은 해당 요소를 X축 또는 Y축으로 이동시키고자 할 때 사용하는 속성으로, 괄호( ) 안에 얼마만큼 이동시키고 싶은지 입력하면 된다.
작성 형식은 다음과 같다.
- transform:translateX(20px); : X축으로 20px 만큼 이동.
- transform:translateY(-10px); : Y축으로 -10px 만큼 이동.
- transform:translate(20px, -10px); : X축으로 20px, Y축으로 -10px 만큼 이동.
앞에서 사용한 transform:translateY(-50%); 는 자기 크기의 50%만큼 위로 이동시키겠다는 의미이다.
다음 스텝으로 메뉴바를 클릭했을 때, 숨겨져 있던 세부 메뉴 항목들이 드러나게끔 코드를 작성해 보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\css\index.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon"> <!-- label 태그는 inline 속성을 가짐 -->
<span></span>
<span></span>
<span></span>
</label>
<div id="header">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
<li><a href="#">menu1</a></li>
</ul>
</div>
</body>
</html>
기존의 html 코드에서 메뉴 영역에 해당하는 새로운 <div>를 만들고 <ul>, <li>를 사용해 영역 안에 메뉴 리스트를 생성해 보았다.
input[id="icon"] {
display: none;
}
body{
height:3000px;
}
input[id="icon"] + label {
display:block;
width: 60px;
height: 40px;
cursor:pointer;
position:relative;
z-index:2;
}
input[id="icon"] + label > span {
display:block;
height:5px;
width:100%;
border-radius:30px;
background: black;
position:absolute;
}
input[id="icon"] + label > span:nth-child(1) {
top:0;
}
input[id="icon"] + label > span:nth-child(2) {
top:50%;
transform:translateY(-50%);
}
input[id="icon"] + label > span:nth-child(3) {
bottom:0;
}
input[id="icon"] + label + #header {
position:fixed;
width:150px;
height:100%;
background:#333;
padding:60px 25px 25px 25px;
box-sizing:border-box;
top:0;
z-index:1;
}
#header에 css를 적용하여 기본 포맷을 만들었고, input[id="icon"] + label 에 z-index:2;를 적용한 뒤
input[id="icon"] + label + #header에 z-index:1;을 적용하여 겹쳐지게 만들었다.
그 후 input[id="icon"] + label + #header에 메뉴바의 width 만큼 left:-150px;을 줘서 메뉴바를 화면 바깥으로 숨겨 놓았다.
그리고 position:fixed;를 사용해서 스크롤을 내리더라도 같은 위치에서 붙어다니도록 설정하였다.
마지막으로 햄버거 메뉴를 클릭했을 때 세부 메뉴바가 등장하게끔 하기 위해 css 코드에 다음 내용들을 추가하였다.
input[id="icon"]:checked + label > span:nth-child(1) {
top:50%;
transform:translateY(-50%) rotate(45deg);
}
input[id="icon"]:checked + label > span:nth-child(2) {
display:none;
}
input[id="icon"]:checked + label > span:nth-child(3) {
bottom:50%;
transform:translateY(50%) rotate(-45deg);
}
input[id="icon"]:checked + label + #header {
left:0;
}
input[id="icon"]:checked를 이용해서 input 박스를 클릭할 시 작성된 css가 적용되게끔 코드를 구성하였다.
또한 transform:translateY( ) rotate( ); 을 이용해 메뉴바에 위치한 선들이 움직이면서 X자 모양으로 변하게 하였고, input[id="icon"]:checked + label + #header { left:0; } 을 이용해 input 박스를 클릭했을 시
header 영역의 위치가 left:-150px; 에서 left:0;가 되어 화면에 나타나게끔 하였다.
+) transform:rotate( ); 은 해당 요소를 지정된 각도만큼 회전시키는 css 속성이다. 괄호( ) 안에 각도를 입력하게 되는데 플러스 값일 경우 시계방향, 마이너스 값일 경우 반시계 방향으로 회전하게 된다. 작성 형식은 다음과 같다.
- transform:rotateX(Ndeg) : X축 기준으로 N도 만큼 회전.
- transform:rotateY(Ndeg) : Y축 기준으로 N도 만큼 회전.
- transform:rotate(Ndeg) : N도 만큼 회전.
마지막으로 transition: all 0.35s; 를 input[id="icon"] + label > span { } 과 input[id="icon"] + label + #header { } 에
추가로 작성해준다.
transition: all 0.35s;는 진행되는 과정들을 천천히 보여줄 수 있는 css 속성이다.
해당 css를 적용하면 0.35초 동안 진행되는 과정들을 눈으로 확인할 수 있다.
이제 최종 결과물을 확인해 보자. 제대로 잘 작동하는 것을 확인할 수 있다.
See the Pen hamburger_menu_proto by sangbeomhwang (@sangbeomhwang) on CodePen.
4) 코드 실습
index.html & index.css
See the Pen hamburger_menu by sangbeomhwang (@sangbeomhwang) on CodePen.
※ width: 0; height: 0; overflow: hidden;을 줘서 해당 element를 안 보이게 할 수는 있지만 해당 element 영역 자체를 없애는 것은 아니기에 element와 함께 영역 자체를 없애주는 display: none;을 사용하는 것이 좋음!!
clone.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>경일게임아카데미</title>
<link rel="stylesheet" href="./public/css/clone.css" />
</head>
<body>
<div id="wrap">
<!-- start header -->
<div id="header_wrap">
<div id="header">
<h1 class="logo">
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/logo_new_2018.png"
alt="logo"
/>
</a>
</h1>
<div id="gnb">
<ul>
<li>
<a href="#">학교소개</a>
</li>
<li>
<a href="#">교육과정</a>
</li>
<li>
<a href="#">취업정보</a>
</li>
<li>
<a href="#">커뮤니티</a>
</li>
<li>
<a href="#">상담신청</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end header -->
<!-- start visual -->
<div id="visual_wrap">
<div id="visual">
<ul>
<li class="visual_img1">
<!-- 여기서 name 속성은 radio(하나의 요소만 선택 가능, 중복 선택 불가능)에 해당하는 element를 그룹화해주는 용도 -->
<input type="radio" id="tab1" checked="checked" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1663647850_20800_1.jpg"
alt="visual1"
/>
</li>
<li class="visual_img2">
<input type="radio" id="tab2" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838619_28666_1.png"
alt="visual2"
/>
</li>
<li class="visual_img3">
<input type="radio" id="tab3" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838512_01844_1.png"
alt="visual3"
/>
</li>
<li class="visual_img4">
<input type="radio" id="tab4" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838462_26399_1.png"
alt="visual4"
/>
</li>
<li class="visual_img5">
<input type="radio" id="tab5" name="visual" />
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/main/1666596927_56073_1.jpg"
alt="visual5"
/>
</li>
</ul>
<div id="blind_bar">
<ul>
<li class="visual_tab1">
<label for="tab1">
<span>4.0기술융합캠프</span>
</label>
</li>
<li class="visual_tab2">
<label for="tab2">
<span>왜 돈내고 배워?</span>
</label>
</li>
<li class="visual_tab3">
<label for="tab3">
<span>취업 솔루션</span>
</label>
</li>
<li class="visual_tab4">
<label for="tab4">
<span>함께 만듭니다</span>
</label>
</li>
<li class="visual_tab5">
<label for="tab5">
<span>우수 훈련기관</span>
</label>
</li>
</ul>
</div>
</div>
</div>
<!-- end visual -->
<!-- start contents -->
<div id="contents_wrap">
<div id="contents">
<div id="lecture">
<ul>
<li class="con1">
<h2>
<span>Game Architecture</span>
게임 기획
</h2>
<p>게임기획자를 위한 정석 Class</p>
<a href="#">바로가기</a>
</li>
<li class="con2">
<h2>
<span>Game Programming</span>
게임 프로그래밍
</h2>
<p class="con">게임프로그래밍을 위한 정석 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con3">
<h2>
<span>Game Artworks</span>
게임 원화
</h2>
<p class="con">게임 원화를 위한 정석 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con4">
<h2>
<span>Progamer Coaching</span>
프로게이머 코칭
</h2>
<p class="con">프로게이머 데뷔 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con5">
<h2>
<span>AR/VR</span>
AR/VR
</h2>
<p class="con">증강현실/가상현실 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con6">
<h2>
<span>Block Chain</span>
블록체인
</h2>
<p class="con">블록체인 Class</p>
<a class="right_now" href="#">바로가기</a>
</li>
<li class="con7">
<h3>공지사항</h3>
<ul>
<li class="left_nt">
<a href="#">- 게임프로그래밍 37기 모집</a>
</li>
<li class="right_nt">10-17</li>
<li class="left_nt">
<a href="#">- 게임 프로그래밍 38기 모집</a>
</li>
<li class="right_nt">10-17</li>
<li class="left_nt">
<a href="#">- 블록체인 8기 모집 임박!</a>
</li>
<li class="right_nt">09-15</li>
<li class="left_nt">
<a href="#">- 게임프로그래밍 37기 모집</a>
</li>
<li class="right_nt">09-15</li>
</ul>
</li>
<li class="con8">
<h3>상담/문의</h3>
<p>
<img
src="http://www.kiweb.or.kr/images/main_new/customer_tel.png"
alt="call"
/>
</p>
<p>
<img
src="http://www.kiweb.or.kr/images/main_new/customer_kakao.png"
alt="kakao"
/>
</p>
<button>
<img
src="http://www.kiweb.or.kr/images/main_new/customer_kakao_btn.png"
alt="plus"
/>
</button>
</li>
</ul>
</div>
<div id="community">
<ul>
<li class="interview">
<div id="interview_whole">
<h3>
취업자인터뷰
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/btn_more.gif"
alt="더보기"
/>
</a>
</h3>
<div id="interview_image">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/interview//1662365058_18358_2.png"
alt="취업자"
/>
</div>
</div>
<a href="#" class="preview"><</a>
<a href="#" class="next">></a>
</li>
<li class="review">
<h3>
수강후기
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/btn_more.gif"
alt="더보기"
/>
</a>
</h3>
<ul>
<li class="left_rv">
<a href="#">생초보에서 개발자까지</a>
<p class="right_rv">[플밍 34기 조호진] 2022-10-17</p>
</li>
<li class="left_rv">
<a href="#">정말 많은 신세를 지고 갑니다.</a>
<p class="right_rv">[플밍 34기 김진호] 2022-10-17</p>
</li>
<li class="left_rv">
<a href="#">백번 천번 추천드립니다.</a>
<p class="right_rv">[플밍 35기 박지용] 2022-09-01</p>
</li>
<li class="left_rv">
<a href="#">비전공자인 저도 했습니다. 모두 취업하세요!</a>
<p class="right_rv">[플밍 35기 이지우] 2022-08-23</p>
</li>
<li class="left_rv">
<a href="#"
>처음엔 걱정했지만 많이 배웠고 취업까지했어요.</a
>
<p class="right_rv">[플밍 35기 권기석] 2022-08-23</p>
</li>
<li class="left_rv">
<a href="#"
>6개월이라는 짧지만 긴 시간이 아깝지 않았어요.</a
>
<p class="right_rv">[플밍 35기 최윤화] 2022-08-23</p>
</li>
</ul>
</li>
</ul>
<div id="youtube">
<h3>
미디어센터
<a href="#">
<img
src="http://www.kiweb.or.kr/images/main_new/btn_more.gif"
alt="더보기"
/>
</a>
</h3>
<div id="youtube_video">
<iframe
width="560"
height="440"
src="https://www.youtube.com/embed/ZIAuAWALOKc"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen=""
></iframe>
</div>
</div>
</div>
<div id="bottom">
<ul>
<li class="ki_story">
<h2>
<span>KI.Story</span>
경일이야기
</h2>
<ul class="main">
<li>
<a href="#">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/kistory//1661914721_76966_1.png"
alt="ki_image"
/>
</a>
</li>
<li>
<a class="main_con" href="#"
>블록체인 2기 프로젝트 발표회 ψ(｀∇´)ψ</a
>
</li>
</ul>
<ul class="details">
<li>
<a href="#">- 우수훈련기관</a>
</li>
<li>
<a href="#">- 함께하는 교육</a>
</li>
<li>
<a href="#">- 취업솔루션</a>
</li>
</ul>
</li>
<li class="useful_info">
<h2>
<span>useful information</span>
유용정보
</h2>
<ul class="main">
<li>
<a href="#">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/reporter//1661242815_42805_1.jpg"
alt="useful_image"
/>
</a>
</li>
<li>
<a class="main_con" href="#"
>직장인 필수 지식, 개발자 용어 모음집</a
>
</li>
</ul>
<ul class="details">
<li>
<a href="#">- 【경일게임아카데미 생활관 소개】</a>
</li>
<li>
<a href="#">- Blockchain이란?</a>
</li>
<li>
<a href="#"
>- 멀티 디바이스 메타버스 플랫폼 개발·기획자 1기 훈련생
모집</a
>
</li>
</ul>
</li>
<li class="column">
<h2>
<span>column</span>
교수칼럼
</h2>
<ul class="main">
<li>
<a href="#">
<img
src="http://www.kiweb.or.kr/nBoard/upload/file/professor//1595562552_11880_1.jpg"
alt="column_image"
/>
</a>
</li>
<li>
<a class="main_con" href="#"
>멘토링별 학생 유형과 개발자의 자세</a
>
</li>
</ul>
<ul class="details">
<li>
<a href="#"
>- 프리 부트캠프 ≪공간 기반의
게임/어트랙션/메타버스/콘...</a
>
</li>
<li>
<a href="#">- 왜 블록체인인가?</a>
</li>
<li>
<a href="#"
>- "학생이 미래다" 게임원화 이진호교수님 인터뷰</a
>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- end contents -->
<!-- start footer -->
<div id="footer_wrap">
<div id="footer">
<div id="footer_menu">
<ul>
<li>
<a href="#">학교소개</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="#">교육과정</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="#">공지사항</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a href="#">상담신청</a>
</li>
<li>
<span>|</span>
</li>
<li>
<a class="personal" href="#">개인정보처리방침</a>
</li>
</ul>
</div>
<h1 id="footer_logo">
<img
src="http://www.kiweb.or.kr/images/main_new/logo_bottom_2018.png"
alt="footer_logo"
/>
</h1>
<div id="company_info">
<p>
서울특별시 강동구 천호대로 995 금복빌딩 3,4층
경일게임아카데미(지하철 5,8호선 1번출구 10m이내)
</p>
<p>
TEL : 02-479-4050 FAX : 02-479-4056 대표자 : 박병준
개인정보관리책임자 : 서혁준
</p>
<p>
사업자번호 : 212-81-89247 통신판매허가번호 :
제2020-서울강동-1360호
</p>
<p class="copyright">
Copyright © 2016. Kyungil Technical College. All rights reserved.
</p>
</div>
</div>
</div>
<!-- end footer -->
</div>
</body>
</html>
clone.css
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
color: #333333;
}
#wrap {
width: 100%;
}
#header_wrap {
width: 100%;
}
#header {
width: 1200px;
height: 100px;
margin: 0 auto;
}
#header > .logo {
float: left;
padding-top: 20px;
box-sizing: border-box;
}
#header > #gnb {
float: right;
}
#header > #gnb > ul > li {
float: left;
}
#header > #gnb > ul > li > a {
display: inline-block;
font-weight: bold;
font-size: 19px;
color: #004385;
width: 180px;
text-align: center;
padding: 40px 0;
box-sizing: border-box;
}
#visual_wrap {
width: 100%;
float: left;
}
#visual_wrap > #visual {
position: relative;
max-width: 1900px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}
#visual > ul > li > input {
opacity: 0;
}
#visual > #blind_bar {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 50px;
text-align: center;
z-index: 2;
}
#visual > #blind_bar > ul > li {
display: inline-block;
}
#visual > #blind_bar > ul > li > label > span {
display: inline-block;
color: #a8b4be;
font-size: 18px;
font-weight: bold;
cursor: pointer;
padding: 15px 40px;
box-sizing: border-box;
}
/* 각 visual 이미지를 쌓아주는 용도 */
#visual > ul > li {
position: absolute;
z-index: 1;
}
/* 각각의 이미지를 모두 안 보이게 초기화(단, html 상 default 값을 지정한 checked 보유 이미지 제외) */
#visual > ul > li > img {
opacity: 0;
}
/* 특정 이미지를 클릭했을 시 해당 이미지가 3초의 시간을 두고 나타나게 함 */
#visual > ul > li > input:checked + img {
opacity: 1;
transition: all 3s;
}
/*
이미지를 낱개로 생각해서 코드가 길어지고 결과 또한 유효하지 않은 코드
#visual > ul > .visual_img1 > input:checked + img {
opacity: 1;
transition: all 3s;
}
#visual > ul > .visual_img1 > input + img {
opacity: 0;
}
#visual > ul > .visual_img2 > input:checked + img {
opacity: 1;
transition: all 3s;
}
#visual > ul > .visual_img2 > input + img {
opacity: 0;
}
#visual > ul > .visual_img3 > input:checked + img {
opacity: 1;
transition: all 3s;
}
#visual > ul > .visual_img3 > input + img {
opacity: 0;
}
#visual > ul > .visual_img4 > input:checked + img {
opacity: 1;
transition: all 3s;
}
#visual > ul > .visual_img4 > input + img {
opacity: 0;
}
#visual > ul > .visual_img5 > input:checked + img {
opacity: 1;
transition: all 3s;
}
#visual > ul > .visual_img5 > input + img {
opacity: 0;
}
*/
#contents_wrap {
float: left;
width: 100%;
margin-top: 30px;
}
#contents {
width: 1200px;
min-height: 1300px;
margin: 0 auto;
}
#contents > #lecture {
float: left;
width: 600px;
border-top: 1px solid #ececee;
border-left: 1px solid #ececee;
box-sizing: border-box;
}
#lecture > ul > li {
float: left;
width: 50%;
height: 230px;
padding: 20px;
border-right: 1px solid #ececee;
border-bottom: 1px solid #ececee;
box-sizing: border-box;
}
#lecture > ul > li > h2 {
font-size: 22px;
color: #2d2d2d;
}
#lecture > ul > li > h2 > span {
display: block;
font-size: 12px;
color: #4689e1;
}
#lecture > ul > li > p {
font-size: 12px;
width: 50%;
min-height: 40px;
margin-top: 30px;
}
#lecture > ul > li > a {
display: inline-block;
margin-top: 40px;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #ffffff;
background: #81b4f2;
border-radius: 15px;
text-align: center;
}
#lecture > ul > li > a:hover {
background: #6da6ea;
}
#contents > #community {
width: 600px;
float: left;
}
#community > ul > li {
min-height: 415px;
border-top: 1px solid #ececee;
border-right: 1px solid #ececee;
box-sizing: border-box;
}
#community > ul > .interview {
float: left;
width: 50%;
position: relative;
}
#community > ul > .interview > #interview_whole > h3 {
display: block;
padding: 20px;
box-sizing: border-box;
}
#community > ul > .interview > #interview_whole > h3 > a {
float: right;
}
#community > ul > .interview > #interview_whole > #interview_image {
text-align: center;
}
#community > ul > .interview > #interview_whole > #interview_image > img {
width: 238px;
height: 330px;
border: 1px solid #ececec;
}
#community > ul > .interview > a {
display: inline-block;
width: 20px;
height: 30px;
background: #eee;
line-height: 30px;
color: #fff;
text-align: center;
}
#community > ul > .interview > .preview {
position: absolute;
left: 0px;
top: 45%;
}
#community > ul > .interview > .next {
position: absolute;
right: 0px;
top: 45%;
}
#community > ul > .review {
float: left;
width: 50%;
background: #fafafa;
padding: 20px 20px 15px 20px;
box-sizing: border-box;
}
#community > ul > .review > h3 {
display: block;
}
#community > ul > .review > h3 > a {
float: right;
}
#community > ul > .review > ul {
margin-top: 15px;
}
#community > ul > .review > ul > li {
float: left;
margin-top: 5px;
padding: 5px 10px;
background: #fff;
border: 1px solid #ececec;
font-size: 12px;
line-height: 20px;
box-sizing: border-box;
}
#community > ul > .review > ul > li > .right_rv {
float: right;
}
#community > #youtube {
float: left;
border-top: 1px solid #ececec;
border-right: 1px solid #ececec;
border-bottom: 1px solid #ececec;
padding: 20px 19px 8px 20px;
box-sizing: border-box;
}
#community > #youtube > h3 {
display: block;
}
#community > #youtube > h3 > a {
float: right;
}
#bottom {
width: 1200px;
float: left;
margin: 30px 0;
}
#bottom > ul > .ki_story {
float: left;
width: 390px;
height: 430px;
margin-right: 15px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #ececec;
background: #fafafa;
}
#bottom > ul > .ki_story > h2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_bbs_ic_01.png)
279px -5px no-repeat;
height: 52px;
}
#bottom > ul > .ki_story > h2 > span {
display: block;
font-size: 12px;
color: #4689e1;
}
#bottom > ul > .ki_story > .main {
margin: 15px 0 10px 0;
}
#bottom > ul > .ki_story > .main > li > .main_con {
color: #666;
font-size: 12px;
display: block;
padding: 5px 0 10px 70px;
box-sizing: border-box;
}
#bottom > ul > .ki_story > .details > li > a {
display: block;
color: #666;
font-size: 12px;
padding: 8px 0;
box-sizing: border-box;
}
#bottom > ul > .useful_info {
float: left;
width: 390px;
height: 430px;
margin-right: 15px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #ececec;
background: #fafafa;
}
#bottom > ul > .useful_info > h2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_bbs_ic_02.png)
275px -4px no-repeat;
height: 52px;
}
#bottom > ul > .useful_info > h2 > span {
display: block;
font-size: 12px;
color: #4689e1;
}
#bottom > ul > .useful_info > .main {
margin: 15px 0 10px 0;
}
#bottom > ul > .useful_info > .main > li > .main_con {
color: #666;
font-size: 12px;
display: block;
padding: 5px 0 10px 90px;
box-sizing: border-box;
}
#bottom > ul > .useful_info > .details > li > a {
display: block;
color: #666;
font-size: 12px;
padding: 8px 0;
box-sizing: border-box;
}
#bottom > ul > .column {
float: left;
width: 390px;
height: 430px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #ececec;
background: #fafafa;
}
#bottom > ul > .column > h2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_bbs_ic_03.png)
272px -4px no-repeat;
height: 52px;
}
#bottom > ul > .column > h2 > span {
display: block;
font-size: 12px;
color: #4689e1;
}
#bottom > ul > .column > .main {
margin: 15px 0 10px 0;
}
#bottom > ul > .column > .main > li > .main_con {
color: #666;
font-size: 12px;
display: block;
padding: 5px 0 10px 90px;
box-sizing: border-box;
}
#bottom > ul > .column > .details > li > a {
display: block;
color: #666;
font-size: 12px;
padding: 8px 0;
box-sizing: border-box;
}
#footer_wrap {
width: 100%;
clear: both;
float: left;
margin-top: 30px;
background: #323233;
}
#footer {
width: 1200px;
height: 150px;
padding: 10px 0;
box-sizing: border-box;
margin: 0 auto;
}
#footer > #footer_menu {
padding: 20px 0 50px 0;
box-sizing: border-box;
}
#footer_menu > ul > li {
float: left;
}
#footer_menu > ul > li > a {
color: #aeaeae;
font-size: 12px;
padding: 0 10px;
box-sizing: border-box;
}
#footer_menu > ul > li > .personal {
font-weight: bold;
}
#footer_menu > ul > li > span {
font-weight: lighter;
color: #aeaeae;
font-size: 11px;
padding: 0 10px;
box-sizing: border-box;
}
#footer > h1 {
float: left;
padding-left: 25px;
box-sizing: border-box;
}
#company_info {
float: left;
padding-left: 70px;
box-sizing: border-box;
}
#company_info > p {
color: #aeaeae;
font-size: 12px;
padding-bottom: 10px;
box-sizing: border-box;
}
#company_info > .copyright {
padding: 10px 0 30px 0;
box-sizing: border-box;
}
.con1 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_01.png)
178px 109px no-repeat;
}
.con2 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_02.png)
178px 109px no-repeat;
}
.con3 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_04.png)
178px 109px no-repeat;
}
.con4 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_05.png)
178px 109px no-repeat;
}
.con5 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_07.jpg)
178px 109px no-repeat;
}
.con6 {
background: url(http://www.kiweb.or.kr/images/main_new/main_con_ic_06.jpg)
178px 109px no-repeat;
}
.con7 > ul {
margin-top: 10px;
}
.con7 > ul > li {
float: left;
padding: 10px 0;
box-sizing: border-box;
}
.con7 > ul > .left_nt > a {
float: left;
cursor: pointer;
color: #666;
font-size: 12px;
}
.con7 > ul > .right_nt {
width: 50px;
text-align: center;
float: right;
cursor: pointer;
color: #666;
font-size: 12px;
}
.con8 > button {
float: left;
border: none;
margin-left: 65px;
}
※ contents 영역의 범위가 넓어 일부는 footer 영역과 같이 첨부함!!
'HTML & CSS > HTML & CSS(2022 version)' 카테고리의 다른 글
| HTML & CSS 실습(3) - 로그인 form, menu, media query (0) | 2022.10.27 |
|---|---|
| HTML & CSS 실습 및 추가 skill(2) (0) | 2022.10.26 |
| CSS 복습(2) - 위치 조절 방법 및 기타 사항 (0) | 2022.10.24 |
| CSS 복습 - 적용 방법 및 선택자, 주요 속성 (0) | 2022.10.21 |
| HTML 복습 - 개념 및 기본 문법, 자주 쓰이는 태그/속성 (0) | 2022.10.20 |
