728x90 반응형 프론트엔드19 비주얼 스튜디오 코드 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. 비주얼 스튜디오 코드 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. 비주얼 스튜디오 코드 33 _ 프로필 카드 만들기 피그마에서 이미지 600 x 600 px 사이즈로 만들어서 작업할 폴더에 export하기 css reset 셋팅하기 html 바디안에 section(카드부분)이 들어가야한다. css 에서 편집하기 body: 배경색 넣어주기 ! section 태그 박스 넣어주기 width : 340px 너비값 넣어주고 높이값은 안넣어준다. 하지만 padding 값을 넣어주면 너비값이 지정되어있기 때문에 높이값이 30+30 으로 되서 60px이 지정됨 margin : 50px auto; 는 박스를 가운데 정렬을 해준다. box-shadow: 10px 10px 30px rgba(0,0,0,0.1) > 그림자 투명도 지정해준다. html에 다시 돌아가서 섹션 안에 nav 태그 넣어주기 폰트어썸에서 bar 아이콘 복사해서 nav.. 2023. 6. 15. 비주얼 스튜디오 코드 27_ 태그 명령 줄여서 쓰기 , 반응형 ● 코드 정렬 : ctrl+a > ctrl + k f ● > : 바로 밑에 있는 태그를 지정할 때 사용 ex: #wrap > div 태그 명령어 줄여서 쓰는 방법 html mosue hover 마우스 오버효과 앞면입니다. mosue hover 마우스 오버효과 뒷면입니다. mouse hover_상하회전 마우스 오버효과 앞면입니다. mouse hover_상하회전 마우스 오버효과 뒷면입니다. css @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } img{ display: block; } body{ height: 100vh; background-color: #0f2027; } #wrap{ height: 100vh; /* 정렬할 때 세로.. 2023. 6. 13. 비주얼 스튜디오 코드 26 _ 마우스오버 효과④ 이미지 회전 효과 html 골격 만들어주기 #wrap .effect ho1 > figure > img = figcaption > h3 = p .effect ho2 > figure > img = figcaption > h3 = p css reset 넣어주기 이미지 사이즈 100% 로 넣어주고 ho1 사이즈와 마진 넣어주기 이미지 양면으로 합쳐주기 피그캡션과 p 태그 수정 ho1- front , back 한번에 style 넣어주기 .front > figure 로 변경하면 한번에 스타일을 적용할 수 있다. 이미지 front 앞면 돌려주기 이미지 back 뒷면 돌려주기 ●backface-visibility : hidden; 뒷면 가려주기 html mosue hover 마우스 오버효과 앞면입니다. mosue ho.. 2023. 6. 13. 비주얼 스튜디오 코드 22_ 탭 메뉴 html 내용 넣기 컨테이너는 각 아이디안에 들어가기 때문에 반드시 클래스로 넣어야한다. .container # wrap 안에 아이디 헤더 > 클래스 컨테이너 > 클래스 헤더 아이디 배너 > 클래스 컨테이너 > 클래스 배너 아이디 컨텐츠 > 클래스 컨테이너 > 클래스 컨텐츠 아이디 푸터 > 클래스 컨테이너 > 클래스푸터 바디 기본 틀 잡아주기 [css 기본 reset 코드 ] css 각 아이디별 영역 잡아주기 .container 에 background color 를 부모(아이디)의 높이값을 종속 받는다. [탭 메뉴 넣기] 탭 안에서 구분할 부분이 버튼이고, 보여지는 부분이 컨텐츠로 1번,2번 구분해서 숨기기 효과 사용한다. active: active 이름을 가진 클래스가 색깔이 다르게 들어갈 수 있음 c.. 2023. 6. 9. 이전 1 2 3 4 다음 728x90
