반응형 ⭐ 코딩 기초/HTML, CSS23 📝 CSS 문단 및 목록 스타일 요약! CSS 문단 스타일 direction - 글자 쓰기 방향 지정하기 ltr : left-to-right, 기본값 rtl : right-to-left text-align - 텍스트 정렬하기 start : direction에서 정한 시작 방향 정렬 (ltr은 왼쪽, rtl은 오른쪽) end : direction에서 정한 끝 방향 정령 left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 맞춤 match-parent : 부모 요소 따라 text-justify - 정렬 시 공백 조절하기 auto : 웹 브라우저에서 자동으로 지정 none : 정렬하지 않음 inter-word : 단어 사이의 공백을 조절해 정렬 distribute : 인접한 글자 사이의 공백을 똑같이.. 2022. 9. 24. 📝 CSS 글자 스타일 속성 요약! 글자에 적용할 수 있는 스타일은 font 스타일과 text 스타일이 있다? font와 text 속성의 차이 Font는 글자 디자인적 요소, Text는 글자의 배치 글자의 효과 Font는 입력 순서가 있음(border background는 순서 상관 없음) 폰트(Font) 스타일 ⭐ font-size - 글자 크기 조절 font-size : ||| 절대 크기 : 브라우저에서 지정한 크기 ex) xx-small ~ xx-large 상대크기 : 부모 요소의 글자크기를 기준으로 더 크게 표시하거나 더 작게 표시 ex) larger, smaller ⭐크기 : 브라우저와 상관 없이 글자 크기를 직접 지정 백분율 : 부모 요소의 글자크기를 기준으로 %를 계산해 지정 글자 크기의 단위 ⭐em : 해당 글꼴의 대문자 M.. 2022. 9. 24. 📐 CSS 속성 값 길이 단위, 색상 설명! CSS 속성 길이 단위 px : 절대 크기 % : 상대 크기, 현재 창의 크기를 기준 em : 상대 크기, 현재 스타일이 지정된 요소의 font-size 기준 rem (root em) : 상대 크기, 최상위 요소의 font-size 기준 vh (vertical height) : 뷰포트 높이값의 100분의 1 단위 vw (vertical wigth) : 뷰포트 넓이값의 100분의 1 단위 vmin (vertical min) : 뷰포트의 최소값의 100분의 1 단위 vmax (vertical max) : 뷰포트의 최대값의 100분의 1 단위 CSS 색상 HEX 코드 #RRGGBB rgb값을 16진수 코드로 rgba 코드 rgb(255, 255, 255) rgba(255, 255, 255, 0.5) rgb값을.. 2022. 9. 24. 🎨 CSS 우선순위와 상속 요약! CSS는 캐스케이딩 스타일 시트, 폭포처럼 위에서 아래로 흐른다! 스타일 우선 순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일이 적용된다 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다 스타일 우선 순위 기준 스타일 우선 순위는 다음과 같은 보편적인 기준으로 정해진다. 내부적으로 계산시 점수의 합이 높은 쪽으로 우선한다. 기준 1 : 중요도 사용자 스타일 시트 저시력자와 색약자 등과 같이 특별한 조건이 필요한 사용자가 그들에 맞게 구성해 놓은 스타일 시트. ex) 고대비 설정. 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수는 없다. !important 제작자 스타일 시트의 중요 .. 2022. 9. 23. 📌 CSS 가상 선택자와 기타 요소 정리! 사용자 동작에 반응하는 가상 클래스 :link - 방문하지 않은 링크에 스타일 적용 기본적으로 a 태그에서는 파란 글자와 밑줄 적용 이를 바꿀 수 있음 :visited - 방문한 링크에 스타일 적용 기본적으로 a 태그에서는 보라 글자와 밑줄 적용 이를 바꿀 수 있음 :hover - 웹 요소에 마우스 커서를 올려 놓을 때의 스타일 적용 롤오버 효과(rollover), 스포일러 :active - 웹 요소를 활성화했을 때의 스타일 적용 누르고 있을 때의 스타일을 지정(링크 클릭) :focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 tap을 눌러 초점을 이동했을 때의 스타일을 지정 ⭐ 정의 순서 무조건 link visited hove.. 2022. 9. 21. 📌 CSS 속성 선택자 정리! 특정한 속성을 사용한 요소에 스타일을 적용 태그[속성] 특정한 속성을 사용한 요소에 스타일을 적용 특정 값을 갖는 속성에 스타일 적용 [속성=값] 정확한 값만을 허용 여러 값 중 특정 값이 "포함"된 속성에 스타일 적용 [속성~=값] 띄어쓰기로 구분된 특정 단어가 있는 경우 예) [class~="button"] 의 경우에는 "flat button" 은 선택됨 "flat-button" 이나 "buttons" 는 포함 안 됨 특정 값이 포함된 속성에 스타일 적용하기 [속성 |=값] 하이픈 포함 단어별. 띄어쓰기나 하이픈으로 나뉜 단어를 체크. 🐍 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용 예) [class|="button"] 의 경우에는 "flat button" "flat-.. 2022. 9. 21. 이전 1 2 3 4 다음 반응형
