나의 개발일지

상속이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다 * 각 속성마다 상속이 되는 것과 상속이 되지 않는 것이 있다 상속이 되는 속성 : color, font-family, font-size, font-weight, text-align, cursor 등 상속이 되지 않는 속성 : background-color, background-image, background-repeat, border, display 등 * 공용키워드 모든 css 속성에 사용 가능한 키워드가 있다. 전역값이라 표현하기도 한다 키워드 의미 inherit 상위 요소로부터 해당 속성의 값을 받아 사용한다 initial (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용한다 unset 상속 속성에 대해서는 in..

의사클래스(가상클래스)는 선택자에 추가하는 키워드로 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다 선택자:의사클래스 { 속성명: 속성값; } 의사클래스 의미 hover 마우스 포인터가 요소에 올라가 있을 때 속성값이 변경된다 active 사용자가 요소를 활성화했다 (ex. 마우스 클릭) focus 요소가 포커스를 받고 있다 disabled 비활성 상태의 요소이다 nth-child() 형제 사이에서의 순서에 따라 요소를 선택한 hover / active focus / disabled disabled nth-child() 1번 2번 3번 4번 5번 만약 여기서 3번 박스의 색깔만 바꾸고 싶다면? () : 괄호 안에 숫자를 써서 바꿔준다 (n) : 양의 정수가 들어가서 모든 박스의 색깔이 ..

의사요소 : 의사요소(pseudo-elements)는 선택자에 추가하는 키워드 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다 선택자::의사요소 { 속성명: 속성값; } 의사요소 의미 after 요소의 앞에 의사 요소를 생성 및 추가 before 요소의 뒤에 의사 요소를 생성 및 추가 first-line 블록 레벨 요소의 첫 번째 선에 스타일을 적용 marker 목록 기호의 스타일을 적용 placeholder 입력 요소의 플레이스홀더(자리표시자)스타일을 적용 first-line / first-letter 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 안녕하세요 만나서 반갑습니다 marker 강아지 고양이 다람쥐 햄..

선택자의 종류 · 기본 선택자 · 그룹 선택자 · 특성 선택자 · 결합 선택자 · 의사 클래스 · 의사 요소 특성선택자 특성선택자(속성선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다 [class *="it"] {color: white;} → 클래스 값에 "it"이 포함되는 요소 선택하기 [class ^="it"] {color: white;} → 클래스 값에 "it"으로 시작하는 요소 선택하기 [class $="it"] {color: white;} → 클래스 값에 "it"으로 끝나는 요소 선택하기 코드 세팅 선택자 연습 태그 두번째 문단 세번째 문단 네번째 문단 다섯번째 문단 스판태그 class를 가지고 있는 태그, id를 가지고 있는 태그 속성 변경하기 선택자 연습 태그 두번째 문단 ..

float 요소의 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치된다 (문서의 흐름에선 제외, 필요한 만큼의 공간은 차지) 속성값 의미 none 기본값, 원래 상태 Left 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함 right 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함 코드세팅 starbucks float: right; starbucks 일반적인 문서의 흐름이라면 핑크 - 아쿠아 - 스타벅스 이지만 float: right; 을 써서 일반적인 문서 흐름을 무시하고 아쿠아가 오른 쪽으로 이동되어졌다 float: left; starbucks float: left; 를 썼더니 스타벅스를 무시하고 왼쪽으로 이동되어졌다. 브라우저가 좁아져도 박스들은 왼쪽 오..

background 배경은 콘텐츠의 배경을 정의한다 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다 하위 속성 역할 background-color 배경 색을 정의한다 background-image 배경 이미지를 정의한다 background-position 배경 이미지의 초기 위치를 정의한다 background-size 배경 이미지의 크기를 정의한다 background-repeat 배경 이미지의 반복 방법을 정의한다 배경색 바꾸기 background-color happy 배경 이미지 바꾸기 및 사이즈 설정 background-image / background-size happy 배경이미지를 꽉 채우고 싶다면? background-size: cover; cover 속성은 이미지의..

Search Icons & Find the Perfect Design | Font Awesome Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 우선 나도 다른 사이트 참고하면서 쓴 거라 자세한 설명은 생략! 폰트 어썸에 로그인해서 아이콘 검색을 해보면 엄청 다양한 무료 아이콘이 많다 내가 필요했던 아이콘은 인스타그램과 티스로리를 나타낼 수 있는 'T' 아이콘! 안에다가 아래의 링크를 첨부해야 한다 (폰트어썸 6 버전임) class="fa-brands fa-..

display:flex 부모요소인 container를 flex container라고 부르고, 자식요소인 item을 flex item라고 부른다. 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것 display 속성의 flex를 지정하여 해당 컨테이너(display 속성에 flex가 지정된 태그)의 아이템(하위태그)들을 유연하게 정렬시킬 수 있음 Flex의 속성들은 1. 컨테이너에 적용하는 속성 2. 아이템에 적용하는 속성 으로 나뉜다 코드 세팅 1 2 3 4 5 6 7 8 9 10 는 block의 요소를 가지기 때문에 가로로 나란히 정렬되지 않고 줄바꿈이 되어 밑으로 아이템이 정렬된다 ★ % vs vh(vw) 차이 % : 부모의 크키가 기준이..

position 요소를 원하는 위치에 자유롭게 배치하고 싶을 때 사용 position을 사용할 때에는 1. 어떤 종류의 position을 사용할 것인지 2. 무엇을 기준으로 요소를 위치시킬 것인지 이 두 가지를 생각하고 사용해야 한다 i'm box position : static ; position의 기본값으로 좌표값의 영향을 받지 않는다 (웹페이지 상에서 꽉 차게 보임) 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 배치시키는 방식이다 그래서 container box의 left : 20px / top : 20px 을 넣어도 아무런 변화가 없다 position : relative; left : 20px / top : 20px을 적용하기 위해 필요하다 자기 자신이 원래 있던 위치를 기준으로 요소를 배치..

Semantic Tags(Markup) : 의미의, 의미가 있는 웹사이트의 구조 조금 더 의미있는 태그들을 사용하여 만들자! : 웹사이트의 브랜드를 나타내줄 수 있는 로고, 사용자들을 위한 중요한 메뉴 아이템 : 웹 페이지에서 내부의 다른 영역이나 외부를 연결하는 내비게이션 영역 : 하단에 위치, 해당 문서를 작성한 작성자 정보나, 저작권 등 부가적인 링크나 정보 : 중요한 컨텐츠 영 : 안에서도 페이지 컨텐츠와 직접적으로 상관없는 부가적인 부분 (광고, 페이지와 연결된 다른 링크) : 안에 있는 다른 내용들과 상관없이 독립적으로 고유적인 내용을 나타낼때 :또는 안에 연관된 내용을 묶어줄 때 vs 시각적으로만 이탤릭체 강조하는 이탤릭 vs 시작적으로만 볼드체 정말 중요할 때 강조하는 볼드 : Defini..