CSS39 2월 27일 (2) 실습 + 반응형 웹 만들기 실습(실습기록) 이미지 슬라이더 만들기 테이블 스타일링 드룹다운 메뉴 만들기 배경이미지만 투명하게 처리하기 반응형 웹이란? 하나의 사이트 페이지로 데스크톱(컴퓨터), 스마트폰, 스마트패드 등 접속하는 장치(디스플레이 종류)에 따라 요소의 크기 및 배치, 표시 등을 자동으로 변환하도록 웹 html head 태그의 meta 태그에 viewport를 설정하여 반응형 웹 페이지를 제작 meta 태그란? 해당페이지의 정보(메타데이터)를 제공하기 위해 사용하는 태그 사용자에게 보여지는 태그는 아니다. 브라우저에게 작업을 지시하는 태그, 데이터의 데이터 속성종류) 1. name : 메타데이터의 종류를 지정하는 속성 2. content - name에 따라 분류된 메타데이터의 내용을 작성하는 속성 name 주요속성값 d.. 2023. 2. 27. 2월 27일 (1) CSS - transform, transition transform(모양변환) 요소의 모양을 변화시키는 속성 속성값 (2D) 위치와 기울기 변환할 때만 '-' 단위 사용 가능하다. 1. 위치변환 - translate translate(x, y) - 원래 위치에서 x, y 만큼 이동 보통 position으로 이동하고, translate는 동적인 변화를 줄 때 사용한다. translateX(x) - x 축으로만 이동 translateY(y) - y 축으로만 이동 위치 변환 위치 변환 각도 변환 2. 각도변환 - rotate 단위 deg 기본방향 : 시계방향, '-' 반시계방향 각도 변환 :hover 넣은 예제 (마우스를 가져다 대면 이동하는 모습이 나온다) 위치 변환 각도 변환 각도 원으로 만들기 예제 위치 변환 각도 변환 각도 3. 크기변환 - scale.. 2023. 2. 27. 2월 24일 CSS - flexbox Flexbox display : flex - 부모요소에 설정 Container(부모요소)에서는 item(자식요소)의 배치와 관련된 속성을 처리하고, item에서는 자식요소의 크기 등의 속성을 처리한다. 속성 1. Container 1) flex-direction 내부요소의 배치 방향 row 기본값, 왼쪽에서부터 가로로 배치 row-reverse 오른쪽에서부터 가로로 배치 column 위에서부터 세로로 배치 column-reverse 아래에서부터 세로로 배치 maxmids? 기준값이상 증가가 되지 않는 일정한 수준이 되면 더 이상 줄어들지 않고 삐져나온다. item 높이 160px, container 높이 190px 2) flex-wrap 내부 요소의 줄바꿈 설정 nowarp 감싸지 않음, 줄바꿈 안됨, .. 2023. 2. 24. CSS 구문(형식), 주석, 스타일 시트 CSS 구문(형식) CSS의 구문(형식)은 선택자와 선언 블록으로 구성된다. 선택자 { 속성:속성값} 선택자는 스타일을 지정할 HTML 요소를 가리키며, 선언 블록에는 선택자에 어떤 속성을 부여할 것인지 속성 이름과, 속성값은 무엇을 줄 것인지 선언한다. 선택자 { 속성1:속성값1; 속성2:속성값2; } 여러 CSS 선언은 세미콜론으로 구분되며, 선언 블록은 중괄호로 묶는다. 예) 선택자 { 속성1:속성값1; 속성2:속성값2; } p { color:red; text-align:center; } 선택자는 p 속성은 color, text-align 속성값은 red, center p는 CSS의 선택자(스타일을 지정하려는 HTML 요소를 가리킴: ). color는 속성이고 red속성 값 text-align는 속.. 2023. 2. 24. 2월 23일 (2) CSS selector 2, z-index, display, flex 3. 구조 가상 선택자 HTML 요소의 계층 구조를 기반으로 선택 1) :nth-child(n) - 테이블에서 많이 사용된다. border의 색은 아무것도 지정하지 않으면 검정색이지만 글자색에 따라서 표현된다. n, odd, even 반복활용 가능, 수치를 정해주면 그 수치에 지정된 것만 활용할 수 있다. n 수식이나 특정한 키워드를 사용 even(짝수), odd(홀수), 2n, 3n 등 2) :first-child - 동일 계층의 첫 번째 요소 선택 3) :last-child - 동일 계층의 마지막 요소 선택 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프.. 2023. 2. 23. 2월 23일 (1) CSS clear, selector1 복습 + 추가 설명 @import 전처리 사용자가 작성한 코드를 처리하기 전에 미리 처리되어 준비된 부분 cross origin 두 개의 서버, 보안이 취약하기 때문에 기본적으로는 허용하지 않는다. 요즘은 float 보다는 flex를 많이 쓴다. float 이어서~ clear 속성 : float 속성이 설정된 요소의 float 속성을 제거 방향에 맞추어서 제거해야 한다. 속성값 left - float : left;를 제거 right - float : right;를 제거 both : 둘다 제거 box1 box2 box3 box4 box5 팁) clear로 float 효과를 제거하는 것보다, div로 영역을 분할하여 부분별로 float 속성을 넣는 것이 조절하기 쉽다. Selecor 2 (가상 선택자와 조합.. 2023. 2. 23. 이전 1 2 3 4 5 6 7 다음
