FrontEnd/CSS 관련자료13 width, max-width 의 차이 개요 모던 웹 디자인 실습을 하는 도중 원래 알고 있던 max-width 의 개념에 반하는 현상이 나타난 듯 하여 궁금증이 생겼고 이를 정리하기 위해 글을 작성합니다. 개념 width : 속성을 100%로 설정할 경우 요소를 감싸고 있는 부모 요소의 크기에 맞춰 100%를 유지 max-width : 속성을 100%로 설정할 경우 요소의 기본 크기 이상으로는 조절되지 않음 예제 위 그림에서 이미지 리소스의 크기는 1500 * 375 크기이다. 여기에 max-width 또는 width를 100% 적용해보면 다음과 같다. 조금 의아했던게 max-width 로 속성을 100% 기본 요소 크기로 잡힌다고 알고 있었다. `그러면 1500*375 크기로 잡혀야 되지 않나? 근데 오히려 화면에 맞춰서 더 작게 영역이 .. 2020. 2. 6. text-align을 이용해 블록요소 중앙에 위치시키기 개요 모던 웹 디자인 책을 읽으며 배운 점을 정리합니다. text-align 책에서 ul 태그를 text-align을 사용하여 중앙 정렬합니다. text-align으로 어떻게 중앙 정렬이 가능한지 궁금하였습니다. text-align 속성은 인라인 요소를 문서의 수평측에서 특정 위치로 정렬할 때 사용합니다. (img 태그의 경우 text-align 속성을 직접 적용하면 정렬되지 않고 블록 요소로 감싸준 뒤 사용해야 정렬됩니다) 수평측에서 블록요소 정렬하기 그러면 텍스트를 정렬 시키는 위 속성으로 블록 요소를 정렬할 수 있을까요? 네 있습니다. 일단 일반적인 블록 요소에 text-align 속성을 적용하면 정렬이 되지 않습니다. 아래 그림과 같이 text-align: center 속성을 주어도 정렬이 되지 .. 2020. 1. 29. 모던 웹사이트 디자인의 정석 Question Q) 왜 clear:both를 했는데 레이아웃 깨짐현상이 잡히는걸까? A) 우선 li 태그들을 가로로 배치했다는 점에 주목한다. 이 때 li 태그의 display 속성은 list-item 이다. 이는 다음과 같다. List 계열 태그에서는 특이하게도 list-item라는 display 속성을 사용합니다. 기본적으로는 Block-level의 요소들처럼 작동하지만, 추가적으로 list-style 계열의 CSS 속성을 이용할 수 있다는 특징이 있습니다. 출처 : http://dev.epiloum.net/834 그러므로, div 태그에 사용했던 것처럼 float 속성을 사용하여 가로로 배치할 수 있게 된다. 그런데, 컬럼 탈락 현상을 사용하기 위하여 li 태그의 길이를 50%로 하였다. 이렇게 했을 때 floa.. 2020. 1. 22. vertical-align 속성으로 이미지 공백 지우기 개요 모던 웹사이트 디자인의 정석 책을 공부하면서 새로 알게된 부분을 정리하기 위해 작성하였습니다. 다른 분들께도 도움이 됬으면 합니다. vertical-align vertical-align은 기본적으로 인라인 요소들에 대해서 수직적으로 정렬하기 위해서 사용합니다. 기본 개념은 이러한데, 더 깊은 내용이 담겨있습니다. vertical-align 속성은 기본적으로 다음과 같이 있습니다. baseline - 기본값, 부모 요소의 기준선에 맞춤, 기본 옵션 top - 요소의 상단과 자식 요소를 전체 줄의 상단에 맞춤 middle - 요소의 중간과 자식 요소를 전체 줄의 중간에 맞춤 bottom - 요소의 하단과 자식 요소를 전체 줄의 하단에 맞춤 vertical-align 의 속성에 대한 더 자세한 내용은 다.. 2020. 1. 21. 모던 웹 디자인의 정석(1장) 1장 웹 페이지의 단 구조. 1-2 박스 가로 정렬 clearfix(클리어픽스)는 플로팅 박스가 뒤에 있는 박스의 레이아웃에 영향을 주지 않게 만드는 기술입니다. 다시 말하자면 특정 박스 C에 clearfix를 적용하면, 그 앞에 있던 박스들의 float 속성을 모두 취소합니다. 바로 앞에 있던 것 하나만 취소하는게 아니라 앞서있는 모든 것을 취소합니다. 그림을 예로 들면 다음과 같습니다. clearfix 값을 왼쪽, 오른쪽 각각 줬을 때를 비교해보면서 확인하겠습니다. box1, box2 가 각각 float:left, right 속성이 적용되어 있고 box4 는 box2 다음에 위치해있습니다. 만약 앞서 있는 것만 취소한다면 clear:right 속성을 준 것과 같으므로 다음과 같이 그려질 것입니다. c.. 2019. 11. 10. 코드스피츠 76-4(Transform 3D & SCSS & Compass) 목차 개요 전체적인 흐름 Post Process 개요 CSS 코드스피츠 4강 강의를 듣고, 내용을 복습하고 정리하는 차원에서 글을 작성하였습니다. 해당 강좌를 학습하시는 분들께도 도움이 되었으면 합니다. 전체적인 흐름 먼저 Post process 라는 추가적인 단계가 geometry, fragment 단계 외에도 존재하는 것을 배웁니다. 그리고 CSS 속성 중 transform 내에서 3D 속성을 줄 수 있는 perspective, perspective-origin, transform-style, transform-origin, backface-visibility 에 대해 배웁니다. 그리고 실습 예제로 드럼통을 만들어 봅니다. 3D를 구현하려면 2D 보다 더 많은 개념이 필요합니다. 특히 수학적인 개념이.. 2019. 11. 5. 코드스피츠 76-3 (CSSOM & Vendor Prefix)-2 Keyframes Keyframes에 대한 문법을 간략히 짚고 넘어가겠습니다. 이렇게 정의한 keyframes는 다음과 같이 사용할 수 있습니다. animation-name에 keyframes로 선언한 이름을 설정하면 사용할 수 있습니다. 다시 강의로 돌아가보겠습니다. from, to 는 keyframe-animation 셀렉터로 일반 DOM 셀럭터와 다릅니다. 문법에서 봤듯이 from, to, %만 사용할 수 있습니다. 그래서 DOM 셀렉터와 다른 방법으로 parsing을 합니다. 어떻게 이걸 객체화 시킬지 살펴보겠습니다. 일단 keyframes 속성은 기존에 우리가 CSS 속성을 담기위해 만들었던 Sheet 객체에 그대로 담긴 어려우므로 기존 Sheet 클래스에서 분기를 시켜줘야 합니다. select.. 2019. 10. 31. 코드스피츠 76-3 (CSSOM & Vendor Prefix) ** Vendor prefix 참고자료 (출처 : TCP School, 지구별 안내서) 벤더 프리픽스(vendor prefix)란? 크롬이나 익스플로러 같이 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다. 즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다. 그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다. 사용방법을 예를 통해서 조금 더 살펴보겠습니다 ( 나중에 Vendor-prefix 를 갖고 framework를.. 2019. 10. 20. 코드스피츠 76-2 (Box model & Absolute Position) 개요 Box model Box-sizing Box shadow 예제 Offset Offset Parent Offset Value 예제 개요 코드스피츠 CSS 수업 2강을 듣고 핵심적인 내용을 정리하고, 추 후에도 보고 기억이 날 수 있도록 기록하기 위해서 정리하였습니다. Box model과 Absolute Position이 주된 내용인데, 한번 같이 살펴보겠습니다. (이 블로그 내용을 보실 때 코드스피츠 76-2 교안을 같이 보시면 내용 진행에 대한 이해가 더욱 잘 되실 수 있습니다) 다음 두 가지 키워드를 염두해두면서 보시면 학습에 더욱 도움이 될 수 있습니다. geometry 단계 : 영역을 잡는 단계 fragment 단계 : 그림을 그리는 단계 브라우저 렌더링 시스템은 geometry 단계를 거친 .. 2019. 10. 8. 이전 1 2 다음
