🚀 FreeCodeCamp Responsive Web Design
FreeCodeCamp Responsive Web Design 과정의 5개 프로젝트까지 모두 완료했다.
초반 과제들은 예시 과제를 최대한 비슷하게 클론코딩하는 것을 목표로 했고, 자신감이 더 붙으면 직접 구상한 디자인을 표현해 보려고 했다.
HTML 속성만 사용해 Email 입력 검증하기
자바스크립트를 사용하지 않고, HTML 만을 사용해서 email 입력을 검증할 수 있다.
input type=”email” 을 사용하고, required 속성을 넣어 준다. form 태그 안에 input type=”submit” 엘리먼트를 넣어주면 기능이 활성화된다. 기능이 활성화 되면 다음과 같이 작동한다.
- 빈칸인 채로 submit 을 할 수 없다.
- @가 생략되면 submit 할 수 없다.
- @의 앞부분이나 뒷부분이 생략되면 submit 할 수 없다.
<form id="form" action="https://www.freecodecamp.org/email-submit" >
<h2 id="form-title">Handcrafted, home-made masterpieces</h2>
<input id="email" placeholder="Enter your email address" type="email" name="email" required>
<input id="submit" type="submit" value="GET STARTED">
</form>본문 요소와 겹치지 않는 fixed top 만들기
스크롤을 내려도 항상 화면 위에 고정되는 header 를 만들었다.
header 가 본문과 겹쳐지는 문제를 해결하려고 찾아보니 body 에 padding-top 값을 header 가 차지하는 공간보다 크게 주면 된다는 것을 알게 되었다.
fixed-bottom 도 같은 방식으로 해결가능할 듯 하다!
💡 본문과 겹치지 않는 헤더를 만들기 위해서는 본문의 padding-top 값을 늘려서 header 태그가 차지하는 공간 아래로 본문 내용을 밀어주어야 한다. 즉 padding-top 을 header 보다 크게 만들어주어야 한다!body에 padding-top 이 없을 때
본문의 윗부분과 헤더가 겹쳐 보인다.
body 에 padding-top 을 줬을 때
헤더와 본문이 겹치지 않는다.
border 를 포함해 크기 지정하기: box-sizing
input 태그와 select 태그를 이용해 입력칸을 만들었는데, 입력 타입에 따라 칸의 크기가 들쭉날쭉했다.
찾아보니 input 태그와 select 태그에 기본으로 설정된 border 값이 달라 발생하는 문제 같았다.
엘리먼트의 가로 크기를 지정하는 width 는 테두리 안쪽의 크기를 의미하기 때문에, 너비를 동일하게 100%로 지정해도 두 엘리먼트의 border 값만큼 너비가 차이나게 되는 것이다.
box-sizing: border-box; 를 적용하면 border 를 포함한 크기를 지정할 수 있다.
* {
box-sizing: border-box;
}box-sizing 적용 전
box-sizing 적용 후
code 엘리먼트 줄바꿈 적용하기
code 태그를 꾸밀 때, 코드가 여러 줄인 경우 줄바꿈을 표현하기 위해 두 가지 방법을 사용할 수 있다.
<pre>태그로 감싸기
pre 태그는 html 에 작성한 내용을 그대로 표현한다. 요소 내의 공백을 그대로 유지해 화면에 출력한다.
<pre><code>function greetMe(yourName) {
alert("Hello " + yourName); }
greetMe("World");</code></pre>
-
white-space: pre-line사용하기white-space속성으로 공백 문자를 처리할 수 있다.normal: 연속된 공백 문자열을 하나로 합친다. 개행 문자도 공백 문자와 동일하게 처리한다. 한 줄이 길어서 넘칠 경우 자동으로 줄바꿈이 일어난다.nowrap: 연속된 공백 문자열을 하나로 합친다.
태그를 사용한 경우에만 줄 바꿈이 일어난다.pre: 연속된 공백 문자열을 유지하고, 개행 문자와
요소 사용 시 줄바꿈이 일어난다.pre-wrap: 연속된 공백 문자열을 유지하고, 개행 문자와
요소 사용 시 줄바꿈이 일어난다. 한 줄이 길어서 넘칠 경우 자동으로 줄을 바꾼다. (indent 를 표현할 수 있다. )pre-line: 연속된 공백 문자열을 하나로 합치고, 개행 문자와
요소 사용 시 줄바꿈이 일어난다. 한 줄이 길어서 넘칠 경우 자동으로 줄을 바꾼다. (indent 는 표현할 수 없다)break-spaces: 줄 끝의 공백도 유지된다. 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있다. 연속 공백이 요소 바깥으로 빠져나가지 않으며, 공간을 차지한다.
네비게이션 스크롤 적용하기
네비게이션 바 안에서 스크롤이 되면서 왼쪽 사이드에 고정시키기 위해서 다음 방법을 사용했다.
- position: fixed 를 사용해 왼쪽 위에 고정시킨다.
- 가로폭은 임의로 지정하되, 세로폭은 100vh(또는 100%) 로 지정한다. 화면 크기가 줄거나 늘어나도 항상 그 자리에 고정되어있어야 하기 때문!
- overflow-y: auto 를 적용해 화면 바깥으로 넘어가는 요소는 세로 스크롤을 적용하도록 했다.
- 본문 영역은 padding-left 를 네비게이션 가로폭보다 큰 값으로 주어서 두 요소가 겹치지 않도록 한다.
- 화면 가로폭이 820px보다 작아질 경우
- flex-direction 을 column 으로 수정해 네비게이션 바 밑에 본문이 오도록 한다.
- 가로 너비를 100% 로 바꾸고, 세로 너비를 250px 등으로 고정시킨다.
- position을 static 으로 초기화하고, 상하좌우 패딩 값을 1rem 정도로 조정해 요소가 겹치지 않도록 한다. 이렇게 하면 본문 스크롤을 내릴 때 네비게이션 바도 함께 올라가게 된다.
- 상단 고정으로 만들고 싶다면 position을 fixed 인 상태 그대로 두고, background-color 를 지정해 준 다음 padding 값을 조정하면 된다.
static - 스크롤을 내렸을 때
fixed - 스크롤을 내렸을 때
프로젝트를 하면서, CSS에 대한 기초가 부족한 것을 많이 느꼈다.
레이아웃 배치를 위한 flex, position 개념을 확실히 알고 있어야 자유자재로 사용할 수 있다는 것을 다시 느꼈다!
✅ 생활코딩 CSS와 mdn web docs 를 번갈아 보고 있다. 기초 개념 잡기에는 생활코딩이 좋은 것 같고, 다양한 속성들을 알고 싶을 때는 mdn 이 좋은 것 같다. 선택자와 트랜지션, 그리드에 대해서 좀 더 공부해봐야겠다.
📌 mdn web docs
📌 생활코딩 CSS
