HTML_CSS17 CSS - border-box 원리 css box padding의 기본 원리 width를 200을 지정한 후, 패딩을 50을 주면, CSS에서는 기본 박스 가로(200px)을 유지한 채 패딩(50px)만큼 크기를 늘림 그렇기에 총 width는 250xp이 됨 이를 막기 위해 box-sizing:border-box를 사용함. box의 크기를 유지한 채 padding 값을 줄 수 있다 2021. 5. 2. CSS - header 및 title,text 가운데 정렬 Welcom to Clone If you have a Account, log in with your email or phone number. .welcome-header { margin-top: 90px; text-align: center; display: flex; flex-direction: column; align-items: center; font-weight: 600; } .welcome-header__title { margin-bottom: 40px; font-size: 25px; } .welcome-header__text { width: 60%; opacity: 0.7; margin-bottom: 90px; } 핵심코드는 text-align: center; display: flex; flex.. 2021. 4. 30. CSS - 상단바 깔끔하게 좌우 가운데 정렬 .status-bar { display: flex; justify-content: space-between; } 일반적으로는 이렇게하게되면 정리가 된다. 하지만 이렇게 했을 경우 3개의 column의 width 크기가 동일해야 이쁘게 정렬이 된다 크기가 일정하지 않을 경우 가운데에 정렬되는 column이 살짝 왼쪽이나 오른쪽으로 치우친다. 간편하지만 신경쓸게 많은 space-between이다 이쁘게 정렬하려면 아래와 같이 하면 된다 No Service 18:43 11% .status-bar { display: flex; justify-content: center; } .status-bar__column { width: 33%; } .status-bar__column:first-child span { ma.. 2021. 4. 29. CSS 방법론 BEM 방식 1. BEM이란? Block Element Modifier를 뜻함 위 세가지로 구성된 이름을 짓는 것으로 __와 --로 구분함 .status__column--text{ color: blue; } 위 코드에서 예제에서는 status는 Block column은 Element text는 Modifier BEM 원칙 ID를 사용하지 않고 class만을 사용 어떻게 보이는가가 아닌, 어떠한 목적인가에 따라 이름을 지음 장점 클래스네임만으로 구조를 파악 할 수 있음 작성된 CSS에서 용소를 쉽게 찾을 수 잇음 늘어지는 셀렉팅을 막아줌 단점 클래스네임이 길어짐 BEM 공식사이트 getbem.com/naming/ 2021. 4. 28. 이전 1 2 3 4 5 다음