나의 개발일지

z-index 속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며 위치 지정 요소에 대해 적용할 수 있는 속성이다 동일한 위치에 요소들이 배치되면, 요소들은 z축에서 쌓이게 된다 z-index의 기본값은 auto! auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4

상속이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다 * 각 속성마다 상속이 되는 것과 상속이 되지 않는 것이 있다 상속이 되는 속성 : 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을 적용하기 위해 필요하다 자기 자신이 원래 있던 위치를 기준으로 요소를 배치..

위의 기획서와 같이 목록과 본문이 나란히 위치하는 레이아웃 디자인하기 1. 태그 : 어떤 의미도 없는 태그, 무색무취와 같은 태그 : division의 약자 NAVIGATION ARTICLE 화면 전체를 쓰는 태그는 자동적으로 줄바꿈이 되어 아래와 같이 나타난다. (*Block level element) 2. 태그 : 태그와 똑같은 목적으로 고안된 태그 : 자기 자신의 콘텐츠만큼 자리를 차지하는 inline element --> 줄바꿈이 되지 않는다! 3. 부피감 알아보기 4. 두 개의 태그를 감싸는 부모 태그 추가 후 id 값 설정 NAVIGATION ARTICLE 5. id 값에 테두리 색상 설정 #grid { border-color: pink; } 6. 두 개의 태그를 나란히 배치하기 #grid {..

그럴듯한 웹페이지처럼 보이기 위해 디자인 하기 1 . border-bottom을 이용하여 밑줄 긋기 2. margin과 padding을 이용해서 간격 조정하기 (*개발자 도구 이용하여 어떤 값을 조정할지 파악) 의 간격이 알맞게 조정되었다 3. 태그에 border-right을 이용하여 목록 분류하기 ol { border-right: 1px solid gray; } 이렇게만 하면 오른쪽 맨 끝에 테두리가 생기는 걸 볼 수 있는데 원래의 기획대로 목록 바로 옆에 두고 싶다면 width 를 이용하여 태그 크기를 지정하면 된다. ol { border-right: 1px solid gray; width: 100px; } 짜잔~ 4. 테두리와 테두리 사이의 간격 없애기 개발자도구를 이용하여 어떤 것 때문에 여백이 ..

화면 전체를 쓰는 태그 vs 콘텐츠 크기 만큼 쓰는 태그 WEB HTML CSS JAVASCRIPT JAVASCRIPT JavaScript is the world's most popular programming language. JavaScript is the programming language of the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced. 위의 코딩에서 태그는 자동으로 줄바꿈이 되어졌다. 왜냐하면 태그 제목 태그인데 제목 태그는 화면 전체를 쓰는 것이 기본적으로 더 편리하기 때문이다. 그리고 링크가 화면 전체를 쓴다면 링크 앞 뒤의 콘텐츠가 줄바꿈되는 경우 불편..

CSS Cascading Style Sheets의 약자 HTML 태그의 골격 부분을 예쁘게 꾸며주는 역할 CSS없이 글자 색을 바꿀 때 heewon park hello 태그는 단지 파란색으로 표현해야 한다는 디자인을 나타낼 뿐 ​ 색을 blue 에서 black 으로 바꾼다면 3개의 코드를 일일이 바꿔야하지만 CSS의 태그를 사용한다면 3개의 중복 코드를 단 하나의 코드를 만들어 중복을 제거할 수 있다 CSS 문법 a { color : red ; } ​ a : 선택자(Selector) color: red ; : 선언, 효과(Declaration) color : 속성(property) red : 값(value) CSS의 여러가지 태그 1. 폰트 색상 바꾸기 Hello 태그 안에 태그를 사용 ​ 모든 의 태그..