Chrome 환경에서만 작업을 했었는데, Safari로 들어갔을 때, 적용이 안되는 폰트가 있다는 것을 알게 되었다. 첫번째 해결방법으로는 * { font-family: Hevetica(혹은 다른 서체), AppleSDGothic !important; } Hevetica를 최우선으로 표시하고 Hevetica가 표시될 수 없다면, AppleSDGothic를 강제로 적용하는 방법이 있다. 하지만 위 방식으로 적용될경우, 모든 텍스트가 서체 하나(AppleSDGothic)로 표시되어 웹사이트의 개성이 무시되고 가독성이 더 떨어질 수도 있다. 따라서 두번째 방법으로, 가독성이 떨어지는 일부 폰트만 Apple SD Gothic Neo로 바꿔 주기로 했다. * { @font-face { font-family: Ap..
Front-end/CSS
마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미한다. 마진 병합은 다음 세가지의 경우에 일어난다. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합 마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다. 마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 한다. 마진 병합이 발생할 경우 절대값이 더 큰 요소의 마진 값이 적용..
div를 겹쳐놓은 상태에서 border를 주면 border가 겹쳐져서 겹쳐진 부분만 더 두꺼워 보인다. border부분만 합치고 싶다면 border-collapse속성을 이용하면 된다. ‘border-collapse’는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. MDN ‘border-collapse’는 table 요소를 꾸미므로 div에서 사용하고 싶을 때는 요소를 테이블로 만들어줘야 한다. 부모 div(section)에 Display :table;자식 div에 display : table-cell;을 주어 table 속성으로 만들어준 뒤 부모 div에 border-collapse: collapse;를 추가해주면 테두리가 겹쳐진 div를 만들 수 있다. See..
class 선택자 class 속성은 글로벌 속성으로, 어느 태그에서도 사용할 수 있다. class 속성에 값을 넣게 되면 class 선택자를 이용해 해당 요소에 스타일 규칙을 적용할 수 있다. .foo {font-size:30px }; I'm hungry class 선택자를 쓸 때는 맨 앞에 .(마침표)를 찍는다. 이렇게 되면 어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 된다. class 선택자의 naming 규칙은 underscore방식을 사용한다. 다중 class .foo{font-size:30px }; .bar{color:orange}; I'm hungry class 속성 안에 공백으로 구분하여 여러 개의 class 값을 넣어줄 수도 있다. id ..
어떤 요소에 적용된 CSS 스타일이 상충할때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다. 요소를 선택하는데는 여러 방법이 있다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. h1 {color:pink;} body h1 {color:blue;} 두 규칙은 모두 h1을 선택하지만, 지정하는 스타일은 서로 다르다. 그렇다면 h1은 어떻게 표현될까? h1에는 color : blue가 적용되는데 이는 구체성과 관련이 있다. 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있다. 이 규칙을 '구체성'이라고 한다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성..
css 구문 h1 { color: yellow; font-size:10px; } 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 10px" 선언부(declaration block) - "{ color: yellow; font-size:10px; }" 규칙(rule set) - "h1 { color: yellow; font-size:10px; }" css 적용 inline 안녕하세요 inline은 해당 요소에 스타일 속성을 이용해 규칙을 선언하는 방법이다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않고, 선언부의 내용만 스타일의 속성 값으로 넣어준..
