jinseoit | DevBlog

background(배경) 정리 1) background-color : 배경색상 -> transparent 투명함, 색상 : 지정 가능한 색상 2) background-image : 배경 이미지 삽입 -> 기본 - none , url("경로") 이미지 경로 3) background-repeat : 배경 이미지 반복 -> 기본 - repeat -이미지를 수직, 수평 반복 repeat-x - 이미지를 수평 반복 repeat-y 이미지를 수직 반복 no-repeat 반복 없음 4) background-position : 배경 이미지 위치 -> 방향 - top, bottom , left, right , center -> 단위 - px, em, rem 등 단위 지정 5) background-size : 배경 이미..

overflow overflow는 이름에서 유추할 수 있듯이 넘치면 어떤 속성을 부여합니다. 속성들 : visible(초기값), hidden, scroll, auto 영역을 넘었을때 scroll 형식으로 보이고 싶다면 scroll을 사용하고 보이고 싶지 않다면 hidden을 사용합시다. See the Pen by jinseoIT (@jinseoit) on CodePen.

margin, padding 1) margin은 외부 여백을 뜻합니다 단위 px,em,vw 등으로 지정하며 적용하는 방법은 .ABC { margin : 10px;} // 상하좌우 모두 여백 .ABC { margin : 10px, 20px;} // 앞쪽 10px은 상하 뒤 20px은 좌우 .ABC { margin : 10px, 15px, 20px;} //앞쪽 10px은 상 가운데 15px 좌우 뒤 20px은 하 .ABC { margin : 10px, 15px, 15px, 20px;} // 앞부터 뒤까지 시계방향으로 상 우 하 좌 순으로 적용됩니다. 위와 같이 네가지 방법으로 적용 가능합니다. 2) padding은 내부 여백을 뜻합니다 단위는 px,em,vw 등으로 지정하며 적용하는 방법은 margin과 같..

투명도 'opacity' 를 이용하여 투명도를 결정합니다 1. 불투명도, 0~1 소수점 숫자 See the Pen by jinseoIT (@jinseoit) on CodePen. 상속[강제상속] 'inherit' 를 이용하여 강제로 부모요소 style을 상속 시킵니다. 글꼴 font-style : 글자 기울기 font-weight : 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트(서체) color : 글자 색상 text-align : 정렬 css단위 px : 픽셀 % : 상대적 백분율 em : 요소의 글꼴 크기 rem : 루트 요소(html)의 글꼴 크기 vw : 뷰포트 가로 너비의 백분율 vh : 뷰포트 세로 너비의 백분율

선택자 우선순위 * // 전체 선택자 0점 div // 태그 선택자 1점 .Hello // class 선택자 10점 #Hello // id 선택자 100점 // inline 선택자 1000점 !important 999999999점 css를 적용할때 같은 요소를 바라볼때 적용되는 css가있고 적용안되는 css가 있는데 이는 선택에 대한 점수가 가장 높은 한가지 css만 적용되기 때문입니다. 가급적 !important 와 inline 방식은 삼가하는게 좋겠네요!

가상요소 선택자(Pseudo-Elements) Before, After ABC::before 선택자 ABC 요소의 내부 앞에 내용(Content)을 삽입 인라인(글자) 요소 ABC::after 선택자 ABC 요소의 내부 뒤에 내용(Content)을 삽입 인라인(글자) 요소 See the Pen by jinseoIT (@jinseoit) on CodePen. 속성 선택자 [ABC] 속성 ABC을 포함한 요소 선택 ex) [type] {color : red;} [ABC="xyz"] 속성 ABC을 포함하고 값이 xyz 요소 선택 ex) [type="password"] { color : red;} See the Pen by jinseoIT (@jinseoit) on CodePen.

nth-child, Not nth child 가상 선택자는 형제 요소중(n)번 째라면 선택한다. ex) .fruits *: nth-child(n){color : orange;} Not 부정 선택자는 ABC:not(XYZ) 형태로 XYZ가 아닌 ABC요소를 선택한다. ex) .fruits *: not(span) { color : red;} See the Pen by jinseoIT (@jinseoit) on CodePen.

가상 클래스 선택자 hover, active, focus 1) hover : 마우스 커서가 올라가 있는 동안 선택 2) active : 마우스를 클릭하고 있는 동안 선택 3) focus : 요소가 포커스 되면 선택 (가능한 요소 : input, select, textarea등) -> Tip. div등 다른 요소들도 focus 사용하고 싶어요! tabindex속성을 이용해 focus사용이 가능한 요소로 변경 단 순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않습니다. See the Pen by jinseoIT (@jinseoit) on CodePen.