본문 바로가기

멀티캠퍼스 풀스택 과정170

프론트엔드2-3. tab메뉴 만들기 먼저 이런 탭 메뉴 사진들 가져오기 1. 기본 구조 만들기 1. ul로 메뉴, radio, 사진 첨부 html 파일 블로그 카페 지식공간 영화 뮤직 웹툰 브런치 게임 2. CSS파일 @charset "UTF-8"; /*초기화*/ body, ul, li {margin:0; padding:0; list-style-type:none;} 2. li과 radio를 연결시키기 li인 블로그 글자를 클릭하면 연결된 radio가 checked 된다. 이렇게 모든 li를 radio와 연결시키면 된다. 그 다음에 라디오 버튼 숨기기 블로그 1. css 파일 @charset "UTF-8"; body, ul, li {margin:0; padding:0; list-style-type:none;} /*메뉴*/ #menu>li {.. 2022. 2. 8.
프론트엔드2-2. 반응형 웹(미디어쿼리)과 meta 태그 반응형 웹: 웹 페이지 하나로 데스크톱, 태블릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지 미디어쿼리: 미디어 타입에 따라 CSS를 적용할 수 있는 기능 반응형 웹 페이지는 미디어 쿼리를 사용해 개발한다. 지원하는 미디어 타입: all(모든 장치), screen(화면), print(프린터), aural(음성 장치), projection(프로젝터), tv(텔레비전) 등등.. 미디어 쿼리의 사용법 1. 를 사용(비추천, 모든 css를 내려받아서 size가 커진다.) 미디어 타입이 스크린이고, 화면의 최대 넓이가 768px로 지정-> 화면의 너비 768이하일 때 적용된다. 2. @media 사용(css 파일 안에서) @media screen and (max-width: 768px) {.. 2022. 2. 7.
프론트엔드2-1. div로 layout / Semantic 태그로 layout div로 layout 1. HTML 파일 top과 header / mainContent / bottom 이렇게 세 부분으로 나누었다. 메뉴1 로그인 회원가입 고객센터 메뉴2 자주하는 질문 Q&A 회원가입 커뮤니티 Footer 2. CSS파일(top과 header:상단) @charset "UTF-8"; /*ul은 기본적으로 위쪽에 margin이 있다. 그래서 body, ul, li는 margin:0, padding:0으로 한다.*/ body, ul, li{margin:0; padding:0; list-style-type:none;} /*상단*/ #top{height:100px; background:#BFCFFF;} #top>div{float:left;} /*메뉴1로그인회원가입고객센터를 한 줄에 정렬*/ #.. 2022. 2. 7.
프론트엔드1-10. css transition(예제) / visibility와 display transition-duration CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 속성의 변화가 일정 기간에 걸쳐 일어나게 한다. transition-duration( 숫자) : 전환효과가 일어나는 지속시간을 명시 예제1) 1.HTML 파일 click 2. CSS 파일 @charset "UTF-8"; div {width: 300px; height: 300px; border: 5px solid red;} div>img{width:100%;} 이미지가 div태그를 넘어갔다. (overflow!) 예제2) overflow로 다 보이게 하고 click했을 때 불투명하게 보이면서 천천히 없어지게 하기 2. CSS 파일(HTML파일은 동일함) @c.. 2022. 2. 7.
프론트엔드1-9. margin과 padding margin padding 테두리(border)바깥을 둘러싸고 있는 영역 내용 영역과 테두리 영역 사이 margin-top, margin-right, margin-bottom, margin-left padding-top, padding-right, padding-bottom, padding-left margin과 padding영역은 투명하고 배경을 글대로 노출하기 때문에 오직 두께(width)만 별도로 설정한다. margin과 padding영역의 width는 border처럼 각 4방향(상하좌우)별로 설정이 가능하다. (위(top)부터 시계방향으로) margin과 padding에 3개의 속성값이 주어지면 각각의 속성값이 위(top), 좌우(left and right), 아래(bottom)으로 적용된다.(없.. 2022. 2. 7.
프론트엔드1-8. CSS border속성 border 테두리를 만드는 속성 오른쪽, 왼쪽, 아래, 위 부분에 대해 개별적으로 스타일을 적용할 수 있다. 내용(content)과 패딩(padding)영역을 둘러싸는 테두리의 스타일을 설정한다. border-width 선의 두께를 정한다. (px, em, cm) 기본값은 medium border-style 선의 모양을 정한다. 기본값은 none border-color 선의 색을 정한다. 기본값은 꾸미려는 요소의 색 initial 기본값을 설정 inherit 부모 요소의 속성값 상속 border-width medium. thick, thin, length, initial, inherit border-style dotted 테두리를 점선으로 설정 dashed 테두리를 약간 긴 점선으로 설정 solid 테.. 2022. 2. 5.

티스토리툴바