전체 글128 [html/css] :not(:hover) :not :not(선택자)는 괄호 안에 있는 선택자를 제외한 나머지 형제나 자식을 선택한다. 아래는 사용 예시이다. 소개 이야기 기술과 서비스 약속과 책임/* ul 안에 li 중 마우스오버(hover)한 li를 제외한 나머지 li의 a 태그의 색상을 #888로 바꿔라 */ul:hover li:not(:hover) a { color: #888;} 2024. 6. 17. [html/css] 선택자 퀴즈 구조선택자의 기본형 중 맞는것을 고르시오 :first-of-child{속성명: 속성값;} 오답 :first-child :end-child{속성명: 속성값;} 오답 :last-child :nth-of-child(숫자 혹은 숫자n){속성명: 속성값;} 오답 :nth-Last-child(숫자 혹은 숫자n){속성명: 속성값;} 정답 ul안에 3개의 li가 들어있다. 그 중 첫번째 li를 선택하는데 틀린방식을 고르시오. ul>li:first-child.. 2024. 6. 14. [html/css] css 초기화 사이트 html에는 기본적으로 여러 속성들로 꾸며져있다.내가 원하는 style을 적용하여 만들기 위해 먼저 이를 초기화 하는데 이를 css 초기화라고 부른다. 본인이 원하는 모양이 있으면 직접 초기화 코드를 짜기도 하고, 아래와 같은 사이트에서 복사해와서 사용하기도 한다.보통 common.css 나 reset.css 라고 파일명을 지정해놓고 따로 링크를 불러와 적용하는 경우가 많다. 1. CDNJS 사이트 위 사이트에 들어가면, meyer-reset 이라는 css rest 코드를 받을 수 있다. 홈페이지를 확인해 보면 두개의 줄이 보이는데 min은 최소한의 내용을 가지고 있다.reset min.css에 비해서 reset.css 주석이나 줄바꿈이나 공백 같은 것들이 보기 좋게 들어가 있어서 좀더 파일이 무겁다.. 2024. 6. 14. [html/css] 시멘틱 태그(Semantic tag) semantic tag(시멘틱 태그) 시멘틱 태그는 웹표준 태그로, 구조를 쉽게 파악하고 큰 영역들을 잡을 수 있도록 하는 구조 태그이다.또한 검색 엔진 같은 프로그램에서 자료를 검색해 정보의 의미를 분석할 수 있게 도와주는 지능형 웹 태그이다.시각장애인들을 위한 웹 표준 방식으로 사용된다. [시멘틱 태그의 종류] 1. : 웹페이지 최상단에 위치하는 태그. 보통 로고와 메뉴, 검색창, 로그인영역 등이 들어간다. 2. : header에 들어가는 GNB영역과 같이 메뉴부분을 표현할 때 사용한다. 웹페이지에 여러 개의 메뉴 영역이 들어갈 경우 #아이디 선택자로 구분한다.header뿐만 아니라 컨텐츠 영역 또는 Footer 부분에도 자유롭게 몇 개든 사용할 수 있다. .. 2024. 6. 14. [html/css] 배경/글자 그라데이션 넣기(Gradient) Gradientgradient는 배경이나 글자에 그라데이션 색상을 넣는 속성이다./* 기본값 */선택자{속성명: 속성종류(각도, 색상값 투명도%, 색상값 투명도%);}속성명background-image 배경에 적용할 경우 사용하는 속성명이다.color 글자에 적용할 경우 사용하는 속성명이다.속성종류linear-grdient{각도 to 방향, 색상값1 투명도%, 색상값2 투명도%}각도 to 방향[각도] ① 숫자deg[방향 종류] ① to top : 아래에서 위로 ② to left : 오른쪽에서 왼쪽으로 ③ to right : 왼쪽에서 오른쪽으로 ④ to bottom : 위에서 아래로radial-gradient{최종모양 크기 at 위치, 색상값1 투명도%, 색상값2 투명도%}.. 2024. 6. 14. [html/css] 투명도(opacity, alpha)의 차이 투명도를 조절하는 opacity 와 alpha 컨텐츠에 투명도를 적용하고 싶을 때, opacity와 alpha를 이용한다.투명도는 0부터 1까지의 값을 입력하며, 소수점 단위로 투명도를 조절할 수 있다. (0=투명, 1= 불투명) opacity의 경우 속성명에 쓰이며 적용한 선택자의 border, 컨텐츠 등 모든 내용을 투명하게 만들고,alpha의 경우 색상에 rgba로 속성값으로 쓰이며 적용한 해당 속성만 투명하게 만든다. /* opacity는 '속성명'이다. */선택자{opacity: 숫자;}/* alpha는 '속성값'이다. */선택자{속성명: rgba(red, green, blue, alpha);} 예시로 test01~03을 만들어 적용해 보았다. 아무것도 적용하지 않은 상태 배경색상에만 alph.. 2024. 6. 14. 이전 1 ··· 11 12 13 14 15 16 17 ··· 22 다음
