2024.07.26 ~ 28 수업

RESULT HTMLdoctype html>html>    head>        title>Profiletitle>        link rel="stylesheet" href="./style.css"> CSS연결-->    head>    body>        div class="wrapper"> div 태그에 wrapper 라는 클래스명을 지정하여 전체 틀을 잡기-->            div class="header"> wrapper 클래스 내에 header, contents, section 클래스를 만들어 3개의 레이아웃 구성 -->                img class="profile" src="./images/profile.png" alt=""> 이미지 태그에 profile 클래스..

• format_list_bulleted BootCamp Review
• · 2024. 8. 7.
• textsms

2024.07.24 / 25 수업

RESULT HTML DOCTYPE html>  html>     head>         title>Fruitstitle>          link rel="stylesheet" href="./common.css">     head>     body>         div>             img src="orange.png" >             h1>orangeh1>             ul>                                   li>a href="./orange.html">orangea>li>                        li>a href="./kiwi.html">kiwia>li>                                 ..

• format_list_bulleted BootCamp Review
• · 2024. 7. 31.
• textsms

3. CSS,JavaScript 간단한 아코디언(접는 콘텐츠) 만들기 (How to make CSS Collapsibles/Accordion)

RESULT HTML 삽입 미리보기할 수 없는 소스 body Section Btn1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Hello, It's Section1 Section Btn2 Hello, It's Section2 Hello, It's Section2 Hello, It's Section2 Section Btn3 Hello, It's Section3 CSS style .accordion{ background-color: whitesmoke; /* 배경색상 화이트스모크 */ cursor: pointer; /* 커서 포..

• format_list_bulleted How to(w3 study)
• · 2022. 7. 1.
• textsms

2-1. CSS, JavaScript 간단한 메뉴 버튼 만들기 (How to make Menu Button[How to make CSS Hamburger Menu])

RESULT HTML 삽입 미리보기할 수 없는 소스 body 클릭하면 메뉴 모양이 X로 변경됩니다. Click on the Menu Icon to transform it to "X" CSS style .container{ /* bar1,2,3 전체의 컨테이너 클래스 지정 */ cursor: pointer; /* 마우스 커서를 요소에 갖다 대면 클릭 모양으로 바뀜 */ } .bar1, .bar2, .bar3{ width: 35px;/* 각각의 bar들을 너비 높이 지정*/ height: 5px; background-color: #000;/* bar색상을 검정색으로 지정 */ margin: 6px 0;/* bar 여백을 상하 6px, 좌우 0px로 지정 */ transition: 0.4s;/* 애니메이션 속..

• format_list_bulleted How to(w3 study)
• · 2022. 6. 25.
• textsms

2-2 . CSS,JavaScript 간단한 메뉴 만들기 (How to make CSS Simple Menu)

이전 글 확인 하기 HTML 삽입 미리보기할 수 없는 소스 body 클릭하면 메뉴 모양이 X로 변경됩니다.." data-og-host="seop-e.tistory.com" data-og-source-url="https://seop-e.tistory.com/2" data-og-url="https://seop-e.tistory.com/2" data-og-image="https://scrap.kakaocdn.net/dn/d1RlWr/hyORK1V8tn/MWnty5uVuHybWxFxDUhk1K/img.png?width=800&height=800&face=0_0_800_800,https://scrap.kakaocdn.net/dn/dAEnHc/hyOSU9Io0E/T7HRO4yKFNNFJRSipjmKBK/img.pn..

• format_list_bulleted How to(w3 study)
• · 2022. 6. 25.
• textsms

1. CSS로 아이콘 메뉴를 만드는 방법 (How to insert an icon)

폰트어썸 링크 작성하기 (font-awesome link insert) 폰트어썸을 사용하기 위해선 위 링크를 작성해야 한다. body CSS style .icon_bar{ /* 각 아이콘들이 묶여있는 div 클래스를 .icon_bar로 잡는다*/ width: 100%;/* 가로길이 100% (%를 사용했으므로 화면을 아무리 늘려도 가로길이가 끝까지 찬다.*/ background-color: #000; /*배경색상 검정색*/ overflow: auto;/*요소가 넘칠경우 스크롤바가 자동으로 생성된다.*/ } .icon_bar a{ /*icon_bar에 있는 a태그*/ float: left;/* 요소를 왼쪽으로 정렬*/ width: 20%;/*넓이 20%*/ text-align: center;/*텍스트 요소..

• format_list_bulleted How to(w3 study)
• · 2022. 6. 22.
• textsms