html, 스타일시트(css, scss)47 [html/css] 위치 속성 position의 개념과 활용 위치를 지정하는 속성 position Position은 위치를 지정할 때 사용하는 위치 속성이다. 위치 속성에는 절대 좌표와 상대 좌표라는 개념이 있다.절대 좌표는 부모태그 혹은 브라우저의 0점을 기준으로 움직이는 좌표를 말하고 상대 좌표는 본인의 태그가 출력되어있는 위치를 기준으로 움직이는 좌표를 말한다. [속성값]1. 선택자{position: static;} :기본값으로 기존 태그가 출력된 모습 그대로를 말한다. position 속성을 적용하지 않은 것과 같다. block 속성의 경우, 태그가 위에서 아래로 출력된 기본 상태를 의미한다. 부모박스에 static 상태가 적용되어 있으면, 자식박스는 부모박스의 좌표를 인식하지 못하고 더 상위 요소를 찾아간다... 2024. 6. 17. [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. 이전 1 2 3 4 5 6 7 8 다음
