본문 바로가기
728x90
반응형

전체 글339

[JAVASCRIPT] 1. 기초 html 기본 골격 ● console.log - 결과값이 잘 나왔는지 확인하는 용도 ● 주석: // h1 에 들어간 값은 웹페이지에 직접영향을 주지만, console 은 확인만 가능하다. 자바스크립트에서 변수지정해주기 console.log(title); 로 결과값 확인 2023. 6. 19.
비주얼 스튜디오 코드 38_ 웹표준) menu 바탕 이미지 고정시키기 ● background-attachment: fixed >> 큰 이미지를 사용해야한다. 웹표준 MENU [토탈 네비게이션 만들기] meta 설명 넣어주기 >> 웹페이지의 상세설명 viewport가 있어야 반응형이 적용이 된다. html 골격만들기 [skip 네비게이션] 아이디 컨텐츠 안에 섹션으로 나눠서 창을 100%사용할 수 있도록 한다. #wrap > #header, #footer > .container >.header, .footer #wrap > #contets > .cont_nav , .cont_tit, .cont_ban, .cont_cont > .container > .tit , .ban, .cont css 편집하기 아이디 먼저 넣어주고 각 아이디 안에 자식 넣어준다. .. 2023. 6. 19.
비주얼 스튜디오 코드_37 Fade In & Fade Out 페이드 인 & 페이드 아웃 html 골격 만들어주기 css 편집 각 태그별 영역 잡아주기 html > 배너 이미지 넣기 ul에 class="list" class 를 지정해줘야한다. li에 class="list_img"를 지정해준다. css > banner 편집 슬라이드 배너 3장 한 위치에 겹쳐주기 fadeout / fadein 효과 주기 이미지슬라이드 효과주기 @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-decoration: none; color: #222; } .clearfix::after, .clearfix::before{ content: ""; display: .. 2023. 6. 16.
비주얼 스튜디오 코드 36_ 웹표준) header 웹표준 ▶ reset. css * { } = 전체 적용됨 .mt10 은 margin-top 10 자동으로 전체 들어감. !important → 우선순위로 적용이 됨 >> reset.css 를 미리 만들어 놓고 사용하면 편리함. reset.css 를 제일 첫번째로 링크해야함. 순서를 반드시 지켜야함! ●meta 태그 : 웹페이지에대한 설명 웹폰트 적용 반드시 웹폰트를 사용해야한다. link - html에 적용 import - css 에 적용 html 골격만들기 **컨테이너를 넣는 이유 똑같은 컨테이너를 반복해서 각 영역에 넣는 이유는 각 영역의 양쪽 부분을 따로 따로 사용하기 위해서!!! css 편집하기 각 태그의 영역을 잡아준다 html 에 .container 를 각 아이디에 넣어준다. css에서 .co.. 2023. 6. 16.
비주얼 스튜디오 코드 _ 35 로딩 애니메이션 박스 3개 만들기 #wrap > .container > .box > .clock / p-clock 박스 영역 잡아주기 ● display: inline-block 인라인에는 본인 가지고 있는 여백이 있기 때문에 인라인블록을 해도 옆으로 나열되지 않음 이런 경우에는 float으로 옆으로 나열해준다. ● float을 띄우면 부모가 높이를 잃게 된다. >> 부모에 clearfix 나 overflow: hidden을 적용해준다. 박스를 개별로 수정해주기 .box:nth-child(1){} / .box:nth-child(2){} .... >> 하지만 박스 갯수가 많아지게 되면 각각 수정하기 시간이 오래걸린다. 박스를 짝수, 홀수로 수정해주기 짝수 .box:nth-of-type(2n){} 홀수 .box:nth-of-.. 2023. 6. 16.
비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제 html 골격잡아주기 body 안에 section태그로 박스 잡아주기 css에서 편집해주기 1. body에 화면 배경색과 크기를 잡아준다. 2. section 편집 : 박스를 만들어주고 section (작업할 영역)위치를 잡아준다. h1 태그로 제목 넣어주기 css 에서 h1 편집 position띄워서 위치를 잡아준다. 구글폰트에서 웹폰트 가져오기 h1에 font-family: .. 웹폰트를 가져온다. 폰트 명령어 간소화하기 ▼ font: 폰트크기 / 줄간격 '폰트종류' ; section 안에 article태그를 넣어준다. article에 class이름을 sky이라고 지정 article에 이미지를 넣어준다. css > article 편집해주기 이미지 sky, sun위치 잡아주기 각각 이미지에 positi.. 2023. 6. 15.
728x90
반응형

티스토리툴바