원티드에서 반응형 웹 사이트 관련된 강의가 있어서 참여하게 되었다.
평소에 반응형 웹 사이트에 관심이 많았기 때문에 아주 흥미로웠다.
Mobile first
데스크탑부터 작업을 하게 되면 오버라이딩이 많이 발생되고, 복잡한 구조를 줄이기 보다 단순한 구조를 늘리는 것이 쉽기 때문에 모바일을 먼저 만드는 것을 추천한다고 합니다.
참고로 오버라이딩은 객체 지향 프로그래밍에서 사용되는 개념으로, 상속 관계에 있는 클래스들 간의 메서드를 재정의하는 과정입니다. 주로 부모 클래스에서 정의된 메서드를 자식 클래스에서 동일한 메서드명으로 다시 구현하면, 자식 클래스에서의 메서드가 부모 클래스의 메서드를 오버라이딩하게 됩니다.
viewport
위의 코드는 VSCode에서 !를 통해 자동 생성되는 HTML 기본 코드입니다.
- viewport는 모바일 브라우저가 웹 페이지를 어떻게 렌더링 해야 하는지 설정해줍니다.
- width는 렌더링 영역의 크기를 설정하고, 보통은 device-width로 설정합니다.
- initial-scale은 웹 페이지가 처음 로딩될 때 줌 레벨을 제어해줍니다. 하지만 최근에는 브라우저가 무시를 한다고 합니다.
웹 표준
World Wide Web과 관련된 기술의 표준 문법을 지키는 웹 개발 기법입니다. 즉, HTML, CSS, JS의 표준 문법을 지켜서 코드를 작성하는 것입니다.
웹 접근성과 함께 사용되는 경우가 많지만 서로 다른 개념입니다. 하지만 웹 표준을 잘 지키면 웹 접근성은 90% 정도는 지켜진다고 합니다.
block 요소와 inline 요소, 그리고 inline-block
추가로 display: inline-block;은 콘텐츠 안에 생성되면서 공간도 생성이 가능합니다. 따라서 padding, margin, height 속성을 줄 수 있습니다.
박스 모델
박스가 content-box일 때, Child containder의 전체 박스 크기는 부모 컨테이너의 넓이인 200px에 border(10px * 2)와 padding(5px * 2)를 모두 더한 값인 230px이 됩니다.
반대로, 박스가border-box일 때, Child containder의 width 크기는 부모 컨테이너의 넓이인 200px에서 border와 padding을 제외해야하기 때문에 border(10px * 2)와 padding(5px * 2)를 모두 뺀 값인 170px이 됩니다.
참고로 input 요소들은 border-box로 되어있습니다.
Reset CSS
코드를 작성하면서 필요한 부분의 reset css만 구성해서 사용하는 것을 추천한다고 합니다. 특히 전체 선택자는 필요없는 곳에 영향을 줄 수 있기 때문에 지양하는 것이 좋다고 합니다.
font-size를 설정할 때 보통 62.5%로 설정하는데, 그 이유는 rem 단위로 설정하기 위해서 입니다. rem은 최상위 요소의 폰트 사이즈를 기준으로 크기를 결정하는데, 62.5%로 설정하면 1rem은 10px이기 때문에, 이후에 폰트 사이즈를 설정할 때 1.2rem은 12px, 1.5rem은 15px... 과 같은 방식으로 쉽게 작성할 수 있기 때문입니다.
Float을 해제하는 방법
float 속성은 float이 지정되길 원하는 자식 요소들에게 주면 됩니다.
float을 사용했다면 문서의 흐름(왼쪽에서 오른쪽, 위에서 아래)이 깨지기 때문에 float을 해제해야하는데, 해지하는 방법으로는 크게 5가지가 있습니다.
1. clear: both;
이때, float을 적용한 요소가 끝나는 지점에서 적용을 해야 float이 해제됩니다.
왼쪽은 이미지가 깨지는 것을 확인할 수 있고, 오른쪽은 background-color가 정상적으로 적용된 것을 확인할 수 있습니다. 하지만 빈 태그를 사용해야한다는 단점이 있습니다.
2. :after 와 clear:both; 같이 주기
위에서 언급한 단점을 해결하기 위해서는 :after를 같이 사용해주면 됩니다.
3. overflow:auto; 또는 overflow:hidden;
overflow:auto;를 더 지향합니다. 그 이유는 hidden을 사용했을 때 원하는 속성이 잘려서 보이게 되는 케이스가 발생할 수 있기 때문입니다.
4. float과 width: 100%; 같이 주기
float이 해제된 것처럼 보이게 할 수 있습니다.
5. display: flow-root;
Position
관련 속성: top, left, bottom, right, z-index
| 문서 흐름 | 관련 속성 | 스크롤 | 기준 | |
| static(기본) | O | X | O | X |
| relative | O | O | O | 자신 |
| absolute | X | O | O | 상위(단, position을 가지고 있는 가장 가까운, 없다면 body 기준) |
| fixed | X | O | X | body |
| sticky(relative + fixed) | ⃤ | O | ⃤ | 자신 |
단, sticky는 부모요소에 overflow 속성이 적용되어 있으면 작동하지 않고, 부모요소의 height 값이 정해져야 합니다.
Flex & Grid
float & position과 다른 점은 부모 요소에서 제어한다는 점입니다.
Flex
- justify: 메인축을 설정합니다.
- align: 크로스축 설정
- flex-direction: row 또는 column에 따라 메인축과 크로스축이 바뀜
Grid
바둑판을 연상하면 됩니다. 그래서 바둑판과 같은 구조를 잡을 때는 Grid를, 그 외에는Flex를 사용하면 됩니다.
Grid는 두 방향(가로-세로)으로 이루어진 2차원 레이아웃 시스템이고, Flex는 한 방향(가로 또는 세로)으로 이루어진 1차원 레이아웃 시스템이기 때문입니다.
유용한 사이트
참고자료
'etc > 개발 세미나' 카테고리의 다른 글
| [원티드 9월] 데스크탑 웹사이트 개발하기 - 사이트 최적화 (0) | 2023.09.21 |
|---|---|
| [원티드 9월] 태블릿 웹사이트 개발하기 (0) | 2023.09.17 |
| [원티드 9월] 반응형 웹사이트 기초 (1) | 2023.09.08 |
| [원티드] 프리온보딩 프론트엔드 챌린지 1-1주차 정리 (0) | 2023.07.10 |
| [원티드] 프리온보딩 프론트엔드 챌린지 7월 - 사전과제 (2) | 2023.07.07 |
댓글