웹 개발/CSS (8) 썸네일형 리스트형 [Web_CSS] 08 ● 가상요소 1. before - 해당 요소 앞에 넣고 싶은 속성 2. after - 해당 요소 뒤에 넣고 싶은 속성 ● HTML5와 시맨틱 태그 - HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공한다. ※ 시맨틱 : "의미, 의미론적인" ● 태그의 종류 - : non-semantic 태그, 안에 들어갈 의미를 크게 유추하기 힘들다. - 미디어 쿼리 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다. @media only all and(조건문){실행문} @media: 미디어 쿼리가 시작됨을 표시 only: 미디어 쿼리 구문을 해석하라는 명령어(생략 가능) all: 미디어 쿼리를 해석해야 할 대상을 나타냄(생략 가능) and: 앞과 .. [Web_CSS] 07 ● 미디어 쿼리 - 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술 @media only all and(조건문){실행문} (1) @media: 미디어 쿼리가 시작됨을 표시 (2) only: 미디어 쿼리 구문을 해석하라는 명령어(생략 가능) (3) all: 미디어 쿼리를 해석해야 할 대상을 나타냄(생략 가능) (4) and: 앞과 뒤의 조건을 나타낸다(생략 가능) (5) (조건문): 해당 조건을 설정, max-width: 이하, min-width: 이상 (6) {실행문}: 조건에 따라 실행할 스타일 설정 실습(position) 실습(publishing_미디어 쿼리 적용) MY SHOP SHOP 0 NEW ITEM 0 1위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 1위 [Web_CSS] 06 ※ 폰트 - 구글 폰트 : https://fonts.google.com/?subset=korean - 네이버 폰트 : https://hangeul.naver.com/font ● font-size(폰트 크기, 글자 크기) 1. 절대적인 크기(px) - 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용 - 절대적 크기로 설정된 텍스트는 모든 브라우저에서 같은 크기로 표현된다. 2. 상대적인 크기(브라우저 기본 글자 크기 : 16px) - 텍스트를 둘러싸고 있는 HTML 요소들의 크기에 따라 텍스트의 크기도 같이 변하는 방식 - 사용자가 웹 브라우저를 통해 텍스트의 크기를 직접 변경할 수도 있다. (1) 백분율(%) - 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기 설정 (2) 배수(em) .. [Web_CSS] 05 실습(display) - 아래 이미지처럼 출력하기 1. float 사용 2. display - flex 사용 3. display - table 사용 실습(publishing) - 스00닷컴 publishing - 코드 MY SHOP SHOP 0 NEW ITEM 0 1위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 1위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 2위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 3위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 [Web_CSS] 04 실습(안쪽 여백 - padding) 저는 첫 번째 태그입니다. 저는 두 번째 태그입니다. 저는 세 번째 태그입니다. 저는 네 번째 태그입니다. 실습(display - flex) 1행 → 1열 2열 3열 4열 2행 → 1열 2열 3열 4열 3행 → 1열 2열 3열 4열 실습(display - table) 1열 2열 3열 4열 1열 2열 3열 4열 [Web_CSS] 03 ● 캐스케이딩(Cascading) - 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. - 이때 충돌을 피하기 위해서는 CSS 적용 우선순위가 필요하다. 1. 중요도 - CSS가 어디에 선언되었는지에 따라서 우선순위가 달라진다. (1) 인라인 스타일(HTML 요소 내부에 style 속성으로 사용) (2) 내부 스타일 시트(HTML 문서의 style 태그 안에 위치) (3) 외부 스타일 시트(CSS 파일을 외부에 따로 만들어서 불러오는 방법) (4) 웹 브라우저 기본 스타일 2. 명시도 - 명확하게 특정할수록 우선순위가 높아진다. !important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 > 상속받은 속성 3. 선언순서 - 나중에 선언된 스타일이 우선 .. [Web_CSS] 02 ● CSS 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용할 때 사용한다. - 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하고, 전체 선택자는 asterisk(*)기호를 사용한다. 2. HTML 요소 선택자(태그 선택자) - 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. - 선택자 위치에 태그명을 작성하면 사용된 모든 해당 태그에 동일한 스타일이 적용된다. 3. 클래스 선택자(class 속성에 부여된 값) - 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다. - 같은 클래스 이름을 가지는 요소들을 모두 선택해주고 스타일 적용 시 선택자에 ".클래스명"을 작성해준다. 4. 아이디 선택자(id 속성에 부여된 값) - 아이디 선택자는 특정 요소를 선택할 때 사용한다.. [Web_CSS] 01 ● CSS(Cascading Style Sheets) - HTML 요소들이 각종 미디어에서 어떻게 보이는 가를 정의하는 데 사용된다. - 스타일을 HTML 문서로부터 분리하는 것이 가능해진다. ● CSS를 사용하는 이유 - HTML 만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 하나하나 따로 지정해주어야 하기 때문에 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지보수가 매우 힘들어진다. - 이 문제점을 해소하기 위해서 W3C에서 만든 스타일 시트 언어가 바로 CSS이다. - 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해줌으로써 사이트의 전체 스타일을 손쉽게 제어할 수 있게 된다. - 또한 웹 사이트의 스타일을 일관성있게 유지할 수 있도록 해주며, 그에 따른 유지보수 또.. 이전 1 다음
