본문 바로가기
728x90
반응형

☭DEVELOPER/#2 웹개발(자바기반 풀스택)214

[JAVASCRIPT]2. 자바스크립트로 스타일 제어하기 html 골격만들기 css 로 박스 편집 자바스크립트로 박스 스타일 편집하기 박스 변수 지정해주기 style 편집해주기 배경색 변경 border 편집 transform 여백적용 id.style.명령어 = 로 스타일을 편집할 수 있다. 카멜표기법 : 두번째 단어에 대문자를 넣어주는 표기법 ex) fontSize, textAlign 2023. 6. 20.
비주얼 스튜디오 코드 40_ 웹표준) 네비게이션 / 배너 네비게이션 html 골격만들기 전체메뉴는 안보여도 되지만 ir_pm > 이미지를 대체할 때 사용할 때 ir_su : 아무것도 안들어가도 됨 h2에 class ir_su를 넣어서 전체메뉴가 안보이도록한다. 메뉴 만들어주기 css .nav편집 컬러가 있을 때는 padding 을 사용하는 것이 좋다. padding 사용했을 때 margin 사용했을 때 div float 띄우고 부모(nav)에 clearfix 주기 단 나누기 a태그에 마우스 올렸을 때 밑줄 나오게 하기 **reset.css 에서 h3 태그만의 스타일을 지정해주고 html에 class = "h3" 이름만 넣어주면 공통적으로 스타일이들어간다. .tit 편집 css에서 .tit 편집해주기 아이콘 넣어주기 ir_pm 으로 전체메뉴 글씨 없애주기 아래 .. 2023. 6. 20.
비주얼 스튜디오 코드 39_ 검색창 만들기 ●input 태그 -text -password -date - color -checkbox : 체크박스는 중복으로 체크를 할 수 있다. -radio : 중복없이 선택함 -button ●placeholder: 박스 안에 텍스트 넣기 -테두리 만들기 border:0; 하면 input이 가지고 있는 테두리가 사라짐 하지만 input을 클릭하면 테두리가 나타남 ●outline: none 으로 클릭하면 나타나는 테두리 없애주기 -button 수정해주기 검색창과 검색버튼 위치 시켜주기 float: left / right 해주고 clearfix 해주는 대신 div에 overflow:hidden 해준다. 검색 [span으로 골격만들어서 검색창만들기] type, class, name 을 지정해 준다. -span 편집 : .. 2023. 6. 20.
[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.
728x90

티스토리툴바