CSS의 기본 중앙 정렬의 여러 가지 방법을 알아보자 1. position , transform div { position: absolute; left:50%; top:50%; } position: absolute를 사용하면 부모 요소를 기준으로 절대적인 위치 값을 지정할 수 있게 된다. 🚫 주의사항) 기준으로 잡고 싶은 부모 요소가 있다면 position: relative를 지정해주어야만 한다. 안 그러면 최상위 요소 body를 기준점으로 잡는다. 이렇게 포지션 값을 지정해주면 div박스의 좌상단이 가운데로 정렬된다. 우리가 원하는 것은 div박스의 정중앙이 가운데로 오는 것이기 때문에 transform을 사용해 대상 엘리먼트를 절반씩 이동시켜야 한다. div { position: absolute; l..
CSS를 사용하면서 가상 요소들을 다루기 시작하니 헷갈리는 부분이 많이 생겼다. 가상 요소와 가상 클래스.. 이름부터 비슷한 두 녀석을 비교해 보기로 했다. 가상 클래스(Pseudo-class) , 너는 무엇이냐? 가상 클래스는 실제로 존재하는 요소에 특정 이벤트 발생 시 가상으로 클래스를 주어 CSS를 제어하는 것. 그렇다고 아무 클래스를 주는 건 아니고 특정 이벤트가 따로 정해져 있다. 문법은 세미콜론 ' : ' 하나를 사용한다. 선택자:가상클래스 { property: value; } button:hover { color: red; } 예를 들어서 버튼에 마우스를 올렸을 때 글씨 색을 바꾸고 싶다면? 아래 예제를 보자 - See the Pen 가상클래스 by kim-Yeji (@yeeed711) on..
CSS 속성 중 요소를 숨기고 싶을 때 사용하는 속성은 대표적으로 세 가지가 있다. 첫 번째. overflow : hidden 두 번째. display : none 세 번째. visibility : hidden 차근차근 세 가지의 차이가 뭔지 알아보자 📣 첫번째. overflow 오버플로우는 요소의 컨텐츠가 요소의 크기보다 넘칠 경우, 컨텐츠의 보여짐을 제어한다. 다시 말해 하위 자식들이 부모의 영역을 침범했을 때 가시성을 제어할 수 있는 속성이다. 속성 값은 총 세 가지, 이는 모두 컨텐츠를 담고 있는 부모 요소에게 속성을 부여한다. hidden : 넘치는 콘텐츠를 부모의 영역만큼 숨김. scroll : 상, 하, 좌, 우, 스크롤 영역이 생김. ( 스크롤 할 영역이 없더라도 ! ) auto : 스크롤..
CSS 로 디자인을 하다 보면 내가 입력한 마진 값과 결과물이 다를 때가 종종 나타난다. 알고 보니 CSS에는 마진 병합 현상이라는 것이 존재했다! 마진 병합 현상? 그게 뭔데? 블록 레벨끼리의 부모 자식 관계에서 마진을 주었을 경우 상하단 마진이 상쇄되는 현상이다. 마진의 크기는 병합되는 마진 중에서 큰 값을 가진 마진의 값으로 병합된다. 마진 병합의 조건 인접한 블록 레벨의 요소의 마진을 주었을 경우 상하단의 여백만 병합 현상이 일어난다 좌우 여백의 병합은 일어나지 않는다 See the Pen margin1 by kim-Yeji (@yeeed711) on CodePen. 인접하는 두 블록 요소에 마진을 30px씩 줬을 때 section 1의 하단과 section 2의 상단 부분의 마진이 겹쳐지는 것을..
css를 쓰다 보면 종종 마주하는 initial 과 inherit 이 둘의 속성에 대해 알아보자 상속이란? 상속(inherit)은 하위 요소가 상위 요소의 스타일 속성 값을 물려받는 것이다. 대표적인 부모자식 사이의 ul 과 li 로 예를 들면 HTML CSS JavaScript ul { color: tomato; } 이렇게 했을 경우에 ul의 자식 요소인 li는 ul의 스타일을 상속받는다. 다만 상속받지 않는 요소들도 존재하는데 상속 요소를 사용할 때 찾아보면서 많은 공부가 됐다! 상속 공용 키워드에는 총 세 가지가 있다. 이를 전역 속성이라고 부른다. 1. inherit 2. initial 3. unset 1. inherit 해당 속성을 상위 요소로부터 상속받는다. 모든 요소가 상속이 되는 것은 아니..
인라인 요소 인라인 요소는 본인의 컨텐츠 크기만큼 영역을 차지하는 요소를 말한다. 기본적으로 width , height 를 가지지 않는다. 아니 못한다...😕 대표적인 인라인 요소 span , strong 등이 있다. 더 자세히 알아보고 싶다면 ⬇️ Inline element 시멘틱 태그 Text-level semantics inline element , 줄 바꿈을 위한 태그 을 사용하면 바로 줄 바꿈이 일어난다 은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄 바꿈이 일어나게 하는 것 html의 핵심적인 요 yeeed.tistory.com 블록 요소 블록 요소는 하나의 독립된 덩어리로 화면의 가로 폭 전체를 영역으로 가진다. 일반적으로 블록 요소를 사용하면 줄 바꿈이 일어난다. 대표적인 블록 요..
HTML 태그들 중 가장 난이도 높았던 게 있다면...? 바로 태그다. (개인적인 이해도입니다 🥲) 그래서 엑셀도 안좋아한다ㅋ.ㅋ 그도 그럴 것이 행열로 가득 찬 모니터 화면을 보고 있자면 현기증이 난다...; 그것과 비슷한, 아니 거의 똑같은 모습을 구현할 수 있는 태그가 바로 ! 이젠 싫다고 피할 수 없게 됐으므로... 하나하나 차근차근 이해해보기로 했다. 개인적으로 공부한 내용을 정리한 게시물입니다. 부정확한 정보가 있을 수 있습니다. 오류 발견 시 피드백 부탁드려요 ! 어디에 사용되는가? 태그는 말 그대로 테이블을 만들 때 사용된다. 표의 형태를 갖추고 있으며 그 안에는 제목(caption) 과 행(tr), 열(col), 셀(td), 셀의 제목(th) 을 자식 요소로 가지고 있다. 태그의 종류들 ..
