C-log

이번 포스팅은 지난번 border 값을 제거했을 때 해당 요소가 밀리는 margin 겹침/중첩 현상을 다루어 볼 것이다. 우선 코드를 살펴보면 아래와 같다. DOCTYPE html> Document normal #empty { margin-top: 50px; margin-bottom: 100px; border: 1px solid tomato; } #normal { background-color: powderblue; margin-top: 100px; } 현재 normal요소에 margin-top을 100px를 주었을 때 아무런 변화가 없다. 이는 중첩 현상 때문이다. 따라서 normal 요소가 움직이게 되려면 100px보다 크다면 아래로 움직이게 될 것이다. 여기까지는 우리 모두가 알고 있는 부분이다. ..

이번 포스팅에서는 부모와 자식 요소간의 margin 겹침/중첩 현상을 다루어 볼 것이다. 코드는 아래와 같다. DOCTYPE html> Document Hello World #parent { border: 1px solid tomato; margin-top: 100px; } #child { background-color: powderblue; margin-top: 50px; } 위와 같은 결과가 나온다. 이러한 결과가 나오는 것을 어느 정도 예측이 되었을 것이다. 부모 border안에 Hello World는 부모에 자식 요소로 존재하기에 부모 border 안에 잇는 것이다. 아직은 margin 겹침 현상이 일어 나지 않았다. 그 이유는 border대문인데 border를 주석 처리하고 다시 살펴보면 아래와..

이번 시간에는 margin 겹침/중첩 현상에 관해서 포스팅 하겠다. 아래 코드를 살펴 보자. DOCTYPE html> Document Hello, world Hello, world h1 { border: 1px solid red; margin: 100px; } 위의 코드의 결과를 개발자 모드로 각 margin들의 위치를 살펴보면 아래와 같다. 이와 같은 현상을 확인 할 수 있는데 각 요소들의 margin들이 겹쳐 있음을 알 수 있다. 이것이 바로 margin 겹침/중첩 현상이다. 여기서 우리는 각 margin들을 조절 할 수 있는데 서로 기본 margin의 값들이 접촉이 되어 있는 크기 100px 이상부터 크기를 늘려야 아래 또는 위의 요소들로 부터 거리가 벌어진다. 만약 100px 이하로 둘 중 하나의..

이번 시간에는 box-sizing에대한 포스팅을 할 것이다. 중첩된 margin에 대한 포스팅은 이번 다음 시간에 작성할 예정이다. 우선 코드와 결과물을 살펴보자. DOCTYPE html> Document Hello Hello div { margin: 10px; width: 150px; } #small { border: 10px solid black; } #large { border: 30px solid black; } 이 두 박스 중 어떤 박스가 커보이는가? 당연히 아래에 있는 박스가 훨씬 더 커보일 것이다. 하지만 현재 padding의 영향으로 두 번째 박스가 더 커보일 뿐이지 사실상 해당 element는 동일 한 크기의 사이즈 인것이다. 하지만 이것은 언제나 css를 기준으로 보았을 때 이다. 사용..

이번 시간에는 박스 모델에 관해서 포스팅을 할 것이다. 박스 모델에는 3가지 개념을 알아야 하는데 border, padding, margin 이렇게 있다. 우선 코드를 살펴 보면 아래와 같다. DOCTYPE html> Document Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti voluptates sunt voluptate Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti voluptates sunt voluptate p { border: 10px solid red; padding: 20px; margin: 40px; } 개발자 도구에서도 앞서 말한 3가지를 확..

이번 포스팅에서는 inline block에 관한 포스팅을 할 것이다. block으로 이루어진 태그와 inline으로 이루어져 있는 태그가 있는데 어떤 태그들이 있는지 한번 살펴 보겠다. DOCTYPE html> Document Hello World 개발 공부는 즐겁습니다. 해당 html을 작성하면 h1태그는 자동으로 줄 바꿈이 된다. 아무리 '개발 공부는 즐겁습니다.'를 내부에서 줄 바꿈이 되어 있어도 웹브라우저에선 한 줄로 표현이 된다. 이 코드를 살짝 변형을 해보면 아래와 같다. DOCTYPE html> Document Hello World 개발 공부는 즐겁습니다. 위와 같이 a태그를 삽입해도 줄은 여전히 바뀌지 않는다. 즉, a태그를 h1태그와 동일한 속성을 가진 태그가 아니라는 것을 알 수 있다...

bracket은 개발환경 IDE 중하나로 Adobe에서 개발한 IDE이다. braket의 강의를 중점 적으로 다룰 것은 아니지만 필요에 따라 사용할 수도 있을 것 같아 이렇게 포스팅을한다. 강의 내에서 중요한 개념 하나를 다루는데 그것은 바로 Emmet인데 css코드를 작성할 때 유용하게 사용되는 부가 기능이다. Emmet은 Emmet만의 특정 문법과 사용 방법이 있다. 단축 명령와 같은 개념으로 알고 있으면 좋을 듯 하다. 단축 명령어를 사용함으로써 개발시간을 조금 더 줄여 줄 수 있기에 많이들 사용하고 추천하는 듯 한다. 아래 링크는 Emmet의 문법을 모아 놓은 포스팅이다. 한번 참고로 봐도 좋을 듯 하다. 🏷️ 에멧(Emmet) 문법 모음 - 한눈에 정리 Emmet (에밋) 에밋은 HTML, XM..

캐스케이딩 1부에 이어서 2부를 시작하겠다. 이번 포스팅에서는 캐스케이딩의 규칙을 살펴볼 것이다. 여려 css가 중첩되어 있을 때 우선순위에 관해서 다룰 것이다. 먼저 코드를 살펴보자. DOCTYPE html> Document html css js li { color: red; } #idsel { color: blue; } .classsel { color: green; } 이렇게 작서된 코드의 li들의 코드 색상은 어떻게 적용이 될지 먼저 예상을 해보자. 결과는 아래 더보기와 같다. 더보기 결과적으로 보았을 때는 html에 작성한 style의 attribute color가 우선적으로 적용이 되었다. 그렇다면 해당 style attribute를 삭제하고 나면 어떻게 우선순위가 적용이 될까? 아래 더보기를 ..