아래 두 문단이랑 마지막 문단 말고는 배운 거 적어놓은 거니까 알아서 골라 읽으쇼들.
HTML과 CSS 기초 강의가 끝났습니다. 기초-중급-고급으로 이어지는데요, 사실 중급까지 들었답니다?
근데 부스트캠프 지원한다고 넋 놓고 있었더니 다 까먹은 거 있죠. HTML이랑 CSS에서 까먹을 게 뭐가 있냐고 할 수 있겠지만
있습니다. 왜냐하면 처음 들을 적에 실습까지만 하고 여기에 포스팅을 안했거든요.
따로 정리하지 않아서 휘발돼 버렸다-고 알아들으시면 되겠습니다.
그렇다고 2회차에 특별히 뭔가 더 얻어가는 게 있다거나 그렇진 않았습니다.
1회차에서 놓치고 간 부분들을 다시금 떠올리는 게 목적이었으니 충분하다고 생각합니다.
그래서 강의 중간 중간 '아 이건 내가 그냥 넘어갔다가 계속 헷갈린 개념이네' 싶은 것들은 메모장에 따로 정리해두었습니다.
굳이 굳이 하나씩 다시 써보자면,,,
우선 강의 1회차에서 중급으로 넘어간 뒤에 랜딩페이지 만들고 이런 저런 컴포넌트 만들 때마다 요소들을 가운데 정렬하고 싶은데 이게 padding에 auto를 주던가 아니면 margin에 auto를 주던가,,, 근데 또 그냥 margin: auto; 가 아니라 margin-left: auto; margin-right:auto; 였던 것 같기도 하고,,, 하면서 자꾸 헷갈렸었는데 말이죠
이미지만 삽입하는 경우에는 display: block;에 margin-left: auto; margin-right:auto;라고 하네요. <div>는 애초에 display가 block으로 설정되어 있어서 margin-left: auto; margin-right:auto; 만 넣어주면 된답니다.
그래서 결국 margin: auto;로 귀결되긴 하는데 뭔가 저는 margin-top이나 margin-bottom에 여지를 남겨두고 싶어서 margin-left: auto; margin-right:auto; 를 쓰는 게 차라리 낫겠다 싶습니다.
여기서 나오는 display: block;은 또 뭐냐 싶은데 html 태그들은 각자 미리 설정된 크기라는 게 있고 그게 내부 콘텐츠 크기에 따라 영역을 얼마나 잡아먹는 지에 관한 속성이랍니다. 이걸 어떻게 잘 설명하고 싶은데 정말 정리가 잘 된 글이 있어서 첨부하고 넘어갑니다.
https://memostack.tistory.com/275
HTML 블록(block) , 인라인(inline), 인라인 블록(inline-block)
블록 요소 (Block Element) 사용 가능한 최대 너비를 가진다. 높이는 내부 컨텐츠 크기 만큼 설정됨 {width: 100%; height: auto;} 와 같은 css 속성을 default로 가진다고 생각하면 됨 width, height로 크기를 지정
memostack.tistory.com
그 다음은 margin collapse 현상인데요 테두리가 겹치는 두 요소 중 하나에 margin을 설정할 때 이게 의도한 대로 움직이지 않는 경우가 있다고 합니다. 버그인지 아니면 css를 만든 이의 의도를 해석하지 못하고 사용하는 건 지는 모르겠지만 여튼 두 요소 중 어디 하나에 padding을 아주, 아주 조금만 줘서 테두리를 살짝 띄우면 의도한 대로 margin이 잘 먹는다고 하니 참고하도록 합시다,,
이번엔 position에 관한 건데요, 강의에서 넘겨준 과제를 해결할 때 외엔 아직 써본 적이 없어서 잘 모르겠습니다. 여튼 position: absolute;는 position: relative;를 부모로 갖고 있는 자식에서 가능하다는 것과 position: relative;를 적용하면 top, left, right, bottom으로 좌표 조정이 가능하고 float처럼 요소가 붕 뜬다는 거,,,,?? 아 그리고 position: absolute;를 적용한 요소를 가운데 정렬하려면 position : absolute; left : 0; right : 0;
margin-left : auto; margin-right : auto; width : '적절히' 하면 된다는 거,,, 나머지 알기 쉬운 설명은 강의 주인장이 쓴 내용을 첨부합니다
자 우리가 보통 <div>박스 사이즈 조절할 때 width값을 px로도 주고 %로도 주고 근데 저걸 또 뭐 최대 폭 제한한다고 max-width를 설정하고 하는데 정말 놀라운 건 여기서 우리가 조절하는 width 값은 <div> 자체의 폭이 아니라 그 안에 들어있는 콘텐츠 영역의 폭이란 거~ 그래서 padding, border, margin 조금만 다르게 들어와도 우리가 앞서 설정한 width가 의도대로 동작하지 않는다는 거~
그럼 우리가 설정하는 width가 콘텐츠의 영역이 아닌 <div>박스 자체의 폭이기 위해선 box-sizing: border-box;를 설정해야 한다는 거~
이런 속성은 보통 css 파일 맨 위에 적고 시작한다고 합니다. 추가로 <body>에 margin: 0;도 같이 해주면 좋다고 하네요~
저야 뭐 브라우저는 크롬만 쓰고 물론 넷플릭스 볼 때는 엣지 쓰긴 하는데,,ㅎㅎ,, 여튼 업데이트도 항상 제 때 제 때 해서 어떤 웹페이지를 열람할 때 호환에 관련된 문제를 겪은 적이 없는데 세상에 사람은 정말 많고 그 만큼 다양한 브라우저가 사용되니 호환성 문제가 꼭 생긴다고 합니다. 그런 거 또 해결하는 태그가 있는데 css파일 맨 위에 뭘 적어주면 된다고 하네요. 당장 필요한 것 같진 않아서 검색 키워드만 알아두었습니다. normalize.css라고 치면 나중에 해결됨 ㅋㅅㅋ
셀렉터는 직관적이라 웬만한 건 다 금방 머리에 넣고 갈 수 있겠던데 input 태그에 쓰는 셀렉터 하나는 적어놓고 가야겠다 싶었습니다. 바로 input[type = 000]인데 000 자리에 text ,email, password 등 적어두면 그 인풋 타입에만 스타일을 줄 수 있다는 점~
대충 여기까지입니다. 별 게 없을 줄 알았는데 쓰면서 정말 귀찮은 것이 별 게 아예 없는 건 아닌 것 같네요.
HTML과 CSS 강의라곤 하는데 사실상 CSS 강의라고 봐도 무방할 것 같습니다.
html, css, javascript 후딱 넘기고 vue.js 배울 적에는 아 어차피 우리나라는 프로젝트마다 퍼블리셔 두고 일하니까
내가 css 잘 알 필요는 없겠지~했는데 그건 어디 뭐 대기업에나 가야 하는 소리고 그게 아니라면 필요하겠더라구요.
근데 또 어느 정도라는 게 있지 않겠습니까? 일단 중급 강의까지만 들을 생각이구요,
고급은 챕터 제목 훑어보고 나중에 필요에 의해 들을 것 같습니다.
고급까지 듣다가 늘어지는 것보단 중급에서 깔끔하게 끊고 javascript 배우는 게 우선이라는 생각이거든요.
그리고 지금까진 웹 개발 공부만 했는데 아주 고마운 친구의 조언에 따라 알고리즘 공부도 같이 계속 해볼까 합니다.
하루에 한시간, 두시간이라도 문제 푸는 시간을 떼어두는 것이 제 처지에도, 기분에도 조금 더 나을 것 같다는 생각이랄까요,,
여튼 여기까집니다. ㅃ2
'HTML\CSS' 카테고리의 다른 글
| 적당한 선에서 마무리 (0) | 2023.07.06 |
|---|---|
| 중급 강의 중간 정리 (2) | 2023.07.02 |
