YoonStudyNote

Container Parent Child1 Child2 body *{ border : 2px solid; } .container{ width : 600px; } .parent{ width : 300px; } .child{ width : 150px; } 다음과 같이 작성을 하면, 밑에와 같은 결과가 나온다. 하지만 %로도 똑같이 만들 수 있다. %단위는 부모의 영향을 받기 때문에, 부모요소를 제외하고 자식요소를 수정하면, 부모태그 크기에 따라서 자식태그가 크기를 알아서 조절해준다. 위의 소스코드를 보면 알 수 있는것은, 자식태그들은 부모태그 크기의 절반이다. 이로서 50%로 바꿔 써 주어도 결과값은 똑같이 나온다. body *{ border : 2px solid; } .container{ width : 6..

emmet을 사용하게 되면 쉽고 빠르게 코딩 할 수 있도록 도와준다. 1. 클래스 이름과 태그 이름을 한꺼번에 쉽게 작성하는 방법 ---> ex) ul.list입력후 탭키를 누르면 자동으로 다음과 같이 코딩이 된다. 2. 복잡한 코드도 가능하며, 자식요소도 한꺼번에 한줄로 설정할 수 있다. --> ex) container라는 클래스이며, 자식요소로 ul태그인데, ul태그는 list클래스이름을 가지고, 그 자식요소로 li태그로 list-item이라는 이름을 가지고, 그 li태그는 총 10개이며 li태그의 자식요소로는 a태그가 들어있고, a태그의 텍스트로는 list숫자를 붙히도록 하겠다 .container>ul.list>li.list-item*10>a{list$} 입력후 탭키를 누르면 자동으로 다음과 같이 ..

코딩작업할때, 이미 body태그가 있다고 가정하기 때문에 body태그를 입력하지 않고 시작해도 된다. 그리고 html, css, javascript가 세팅이 되어있기 때문에 개발 환경을 따로 준비하지 않아도된다. Codepen의 장점 1. 개발환경을 세팅하지 않아도 된다. 2. 로그인되어있으면 작업한 코딩을 저장하고 또 쓸 수 있다. 3. html, css, javascript를 세팅을 통해서 외부 라이브러리 들고 오지않고도 실행 가능하게 만들었다. 4. 소스코드 제목도 쉽게 지정 가능하다.

body { margin : 0; padding : 0; } .box{ width : 300px; height : 150px; background : tomato; } 스타일링을 했을때 여백 설정하지 않아도, 알아서 여백 공간이 생긴다. 만약 이 여백을 없애고 싶으면 다음과 같이하면 된다. 이러한 초기화 과정을 reset-css로 이용해 보겠다. reset-css 사이트에 들어가서 html코드 복사후 붙혀넣기를 하는데, 우리가 기존에 사용하던 CSS연결 코드보다 위에 있어야 한다. 이건 반드시 그래야 한다. 이렇게 하면 아까전에 번거롭게 CSS에서 초기화 하지 않고도 모든 태그 기능들이 초기화가 되어 버린다. 이것은 모든 브라우저가 제공하는 스타일을 없애고 내가 만드는 스타일로 새롭게 채워넣겠다 라는 뜻..

우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성(property)을 우선 적용할 지 결정하는 방법 3가지 방법이 있다. (명시도, 선언 순서, 중요도) 1. 명시도 점수가 높은 선언이 우선(명시도) 2. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성한)되는 선언이 우선(선언 순서) 3. 명시도는 '상속' 규칙보다 우선(중요도) -->즉, 상속은 간접적으로 스타일이 적용되기 때문에 우선순위에서 떨어진다. 4. !important가 적용된 적용된 선언 방식이 다른 모든 방식보다 우선(중요도) 1. 가장 중요(!important) 모든 선언을 무시하고 가장 우선 점수 : 무한pt div { color : red !important; } 2. 인라인 선언 방식(Style A..

.ecosystem에 적용된 색상이, 하위 요소들에게도 적용이 된다. (모두 그런것은 아니고 주로 text가 이러한 현상이 일어난다.) .ecosystem{ color : red; } 생태계 동물 호랑이 1. 강제 상속 상속되지 않는 속성(값)도 inherit이라는 값을 사용하여 "부모"에서 "자식"으로 강제 상속 시킬 수 있다. "자식"을 제외한 "후손"에게는 적용되지 않으며, 모든 속성이 강제 상속을 사용할 수 있는 것은 아니다. .parent{ position : absolute; /* 상속되지 않는 속성과 값 */ } .child { position : inherit; /* 강제 상속 받아 position : absolute;와 동일 */ }

1. atter^=value 속성 class을 포함하며 속성 값이 btn-로 시작하는 요소 선택 [class^="btn-"] { /*btn-으로 시작하는 모든 클래스 선택*/ font-weight : bold; border-radius : 20px; } Success Danger Normal 위의 CSS에서는 캐롯("^")을 사용해서 btn-으로 시작 하는 모든 클래스를 선택하게 만들었다. 2. attr$=value 속성 class을 포함하며 속성값이 sucees 또는 danger로 끝나는 요소 선택 [class$="sucess"]{ color : green; } [class$="danger"]{ color : red; } Success Danger Normal

1. attr 속성을 포함한 요소 선택 --> class, id에서 이름짓는건 개발자들에게 여간 힘든일이 아니다. 하지만 id와 class없이도 지정하고 스타일링 할 수 있다! .disabled{ opacity : 0.2; /* 20% */ } ****이것을 이렇게 바꾸면 된다. [disabled]{ opacity : 0.2; /* 20% */ } [type=password] { opacity : 0.5; color : red; } 모든 태그이름이 input이라서 구분이 어려울때 타입으로 지정된 속성으로 "type=password"로 입력해서 CSS설정 해 줄수있다.

주의!! 무조건 CSS에 content라는 요소가 있어야한다! content요소가 없으면 아무런 스타일이 적용되지 않는다. 가상클래스와 구분하기 위해 "::" 콜론을 두번사용해야한다. 1. before html 작성한 태그 앞에 CSS스타일을 입히는 것이다. ul li::before{ content : "숫자"; /*이부분은 작성하지 않으면 아애 안나온다*/ font-weight : bold; color : red; margin-right : 20px; } 1 2 3 4 5 6 7 8 2. after html태그 뒤에 CSS스타일을 사용하는 것이다. ul li::after{ content : "숫자"; /*이부분은 작성하지 않으면 아애 안나온다*/ font-weight : bold; color : red..

1. nth-of-type 태그이름과 동일한 타입인 형제 요소 중 n번째 요소라면 선택 .fruits p:nth-of-type(1){ /*p태그중에 첫번째꺼를 빨간색으로 하겠다*/ color : red; } **주의사항(오류)** .fruits .red:nth-of-type(1){ color : red; } 딸기 망고 사과 오렌지 다음과 같이 입력이 된다면, nth-of-type이 1이기 때문에 li태그중 딸기를 선택하게 된다. 하지만 딸기태그는 red라는 이름이 없기 때문에 오류가 된다. 2. 부정 선택자(Negation Selector) .fruits li:not(.red){ color :red; } 딸기 망고 사과 오렌지 클래스 red만 제외하고 전부 li태그를 빨간색으로 하겠다 라는 뜻이다.