언어/HTML & CSS35 [IT] HTML - position 속성이란 ? ㅇ position 이란 ? ㅡ Normal Flow를 따라서 위치가 배치된다. ( cascaing 의 흐름 ) ㅡ top , bottom , left, right 의 값에 따라 최종 위치가 배치된다 . ㅡ 배너의 위치, 아이콘의 위치 등을 지정할 때 사용한다. ㅇ position 의 종류 ㅡ static (기본값) ㅡ absolute 1) 요소를 Normal Flow에서 제거 하고, 2) 가장 가까운 부모 기준으로 동작이 흐른다 . 3) 그런요소가 없으면 최상위 부모 를 기준으로 한다 . 4) float 처럼 둥둥 뜨게 된다 . 5) 주로 기준점으로 잡고 싶은 부모를 기준을 relative를 설정하고, 자식요소에 absolute로 자주 쓴다 . ㅡ relative 1) Normal Fl.. 2024. 1. 27. [IT] CSS Cascading 이란 ? 상속, 우선순위 ㅇCascading : 폭포같은, 위에서 아래로 흐르는... 뜻 ㅇ CSS 개발을 할 때 흔히 겪을 수 있는 실수는 뭐가 있을까 ? ㅡ 요소에 CSS 를 디자인을 줬지만 적용되지 않을 떄.....!!! ㅇ 이유가 뭘까 ? 1. 상속 ㅡ 부모 요소에 적용되는 스타일은 자식 요소로 상속된다. ㅡ 일부 속성은 자식에게 상속되지 않는다 ( ex, 배경색, 배경이미지, margin ,padding 등 ) 2. 우선순위 ㅡ 선언된 위치 : 브라우저는 HTML/CSS 코드를 위에서 아래로 해석한다 브라우저 기본스타일 < 외부 스타일시트 < 내부스타일시트 < inline 스타일 ㅡ명시도 (Specificity) : 적용범위가 더 구체적일수록 우선적용된다 tag < attribute , class < id ㅇ 해결방법은.. 2024. 1. 26. [IT]] CSS - 가상 요소 선택자란 ? / CSS로 말풍선 모양 테두리 만들기 (border) ㅇ 가상 요소 선택자 ㅡ 실제로 존재하지 않는 가상의 요소를 추가해서 스타일을 적용한다 ㅡ 문법 selector::가상_요소_선택자 { } ㅡ 보통 추가 메뉴를 만들거나, 테두리를 말풍선 형태로 디자인할 때 , 작은 배너효과 등등에 사용한다. ㅇ 필수적인 몇가지 확인해보자 ㅡ ::before , ::after 앞 or 뒤에 가상의 요소를 추가하여 스타일을 적용함 문법에 content:""; 를 필수로 함께 적어야한다. ( 가상 요소의 컨텐츠를 만들어 줘야함. 텍스트,이미지 등이 들어갈 수 있음) ex) 인기 있는 메뉴에 BEST를 붙이고 싶을 때도 가능 .number::after { content: "Best"; font-size: 20px; color: red; } ㅡ ::placeholder 플레이스.. 2024. 1. 26. [IT]] CSS - Attribute 선택자란 ? Attribute 선택자 : HTML 의 attribute (속성) 값으로 특정 요소를 선택할 수 있음 ex) a[target] { } a태그중 target 속성을 갖고있는 요소만 선택 선택 종류 ㅡ [attr] : 해당 attr 을 갖고있는 요소 선택 a[href] { font-size: 40px; } ㅡ [attr=value] : attr 의 값이 특정 value 인 요소 선택 a[href="mailto:aaaaa2@email.com"] { color: greenyellow; } ㅡ [attr~=value] : attr의 값이 특정 value 가 아닌 요소 선택 ㅡ [attr$=value] : value로 끝나는 요소 선택 a[href$=".com"] { background-color: red; } .. 2024. 1. 26. 이전 1 2 3 4 5 6 ··· 9 다음
