YoonStudyNote

요소의 '외부(바깥) 여백'을 지정 값 의미 기본 값 단위 px, em, cm 등 단위로 지정 0 auto 브라우저가 너비를 계산 (보통 특수한 경우에 사용한다.) % 부모 요소의 너비에 대한 비율로 지정 .parent{ width : 400px; height: 200px; border : 4px solid tomato; } .child{ width: 100px; height: 100px; border : 4px solid; margin : 50% } 결과값을 보면 알 수 있듯이, 자식요소의 margin은 자식태그 기준에 50%가 아닌, 부모태그의 가로길이 50%로 만들어졌다는걸 알 수 있다. * 사용법 margin : 위 우 아래 좌; margin : 위 [좌, 우] 아래; margin : [위, 아래..

.parent{ width : 500px; height: 300px; border : 4px solid tomato; margin : 20px; } .child{ height: 200px; background : orange; } 다음과 같은 코드를 보면, parent클래스는 가로 길이가 500px로 정해져 있지만, child클래스는 정해져있지않다. child클래스의 가로길이는 부모클래스의 영향을 받아 100%여도 500px밖에 확장이 되지 않게 된다. 1. max-width, min-width, max-height, min-height 하지만, child클래스에 가로길이와 새로길이의 최대값과 최소값을 정해버리면 더이상 부모클래스 크기에 종속되지 않게 된다. .parent{ width : 500px; h..

1. 블럭 요소일때 .container{ width : auto; height : auto; background : tomato; } 다음과 같이 입력하면, 화면에 아무것도 나오지 않는다. width의 auto의 값은 100%이지만, height의 auto값은 0이기 때문이다. 그래서 height의 값을 변경하면 화면에 값을 볼 수 있게 된다. .container{ width : auto; height : 100px; background : tomato; } 2. 인라인 요소일때 하지만 이와같이 높이만 설정해도 출력이 되지않는 경우도 있다. span{ width : 100px; height : 100px; background : tomato; } 다음과 같이 입력하면 화면에 아무것도 출력되는것이 없다. ..

%는 부모 요소 크기의 영향을 받아서 크기를 결정하게 된다면, 1. em은 자신의 폰트 사이즈의 영향을 받는다. 그래서 보통 em은 조상요소 절대적인요소에 px단위로 크기를 지정하고, 그 밑에 하위 요소에는 em으로 설정을 많이한다. 그리고 상속의 개념이 있어서, 자식요소는 부모요소의 크기를 기반으로 단위를 측정한다. Container Parent Child1 Child2 body *{ border : 2px solid; } .container{ width : 60em; font-size : 15px; } .parent{ width : 30em; font-size : 2em; } .child{ width : 50%; font-size : 2em; } 여기서 알 수 있듯이, container클래스는 fon..

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;와 동일 */ }