1. Todo
대전에서 실시하는 컨퍼런스 있으면 참여하고 벨로그에 적기
2. 수업중 의문 사항과 해결 과정
수업중 다음과 같은 예시 상황이있었다.
예시상황
여기에서 학생이 왜 마진이나 패딩이 다른 요소에도 적용되냐고 질문을 하였고,
abc는 inline요소기때문에 마진이 없고, 오른쪽의 텍스트는 원래 출발선이 test란 글자와 마찬가지라고 대답하셨다.
나는 저 말이 무슨 뜻인지 이해가 안되었고 아래 과정을 거쳐 이해하였다.
문제 해결 과정 1. 검증:
텍스트에만 해당하는 상황인지 확인하기 위해 인라인 div요소를 붙여보았다. 똑같이 작용된 것을 확인 할 수 있었다. 여기서 텍스트의 출발선이라는 강사님의 말에 의구심이 생겼다.
문제 해결 과정 2. 프롬프트:
블록간의 1의 사항을 chatGPT한테 풀어서 설명한 다음 해당 용어나 설명을 의뢰했다.
그러나 gpt의 답변에는 오류가 있다. 강사님이 말씀하신대로 inline요소에는 패딩과 마진이 없다.
그러므로 마진 겹친 현상이 inline 요소에 일어나는 것은 이상하다.
질문 방향성의 수정이 필요했다.
문제 해결 과정 3. 프롬프트 개선:
유의미한
문제 해결 과정 4. 검증:
나는 일련의 의심과 검증 과정을 통하여
선생님이 강사님이 말한 '텍스트는 원래 출발선이 test란 글자와 마찬가지' 에서 출발선의 뜻이
vertical-align의 baseline에 관한 이야기란걸 알 수 있다.
즉 inline요소에 패딩과 마진은 없지만, vertical-align의 default값이 상위 요소의 텍스트 위치에 따라,
3. 이미지사이의 여백
html에서 줄바꿈이 화면에서 한칸의 띄어쓰기로 취급되는 경우가 있다.
만약에 아이템 a와 b사이에 마진이 없는데도 여백이 있을 경우 줄바꿈을 확인하자.
4. 몇몇 선택자
| 선택자 | 설명 |
|---|---|
| nth-child(n) | 앞에서 n번째- 이거 테이블에 넣으면 js없이도 쉽게 스타일 적용 되지 않을까? |
| nth-child(2n+1) | +나 -도 인자로 넣을 수 있다. |
| nth-last-child(n) | 뒤에서 n번째 |
| nth-of-type(n) | 해당 타입 중 n 번째 |
- 주의사항
section > div:nth-child(2)
*section의 두번째 자식이고, div 태그를 가진!
만약 2번째 자식이 div태그가 아니면 아무것도 선택되지 않는다.
6. 중앙정렬
| 태그 | 정렬방법 |
|---|---|
| block요소 | margin: auto 적용 |
| inline요소 | 부모에 text-align:center 적용 |
7. inherity
부모의 속성값을 그대로 상속받는 다는 의미
속성값의 디폴트치가 inherity인 속성들이 있으므로 주의할 것.
8. 클래스 적용 팁
-
html
클래스 두개를 하나의 태그에 적용하고 싶을때
<tag명 class="a b"> -
css
.a .b .a의 자식인 .b
.a.b .a면서.b
.a,.b .a거나 .b
css는 cascading방식이다. 즉 내려가면서 읽으므로 아래쪽 스타일이 더 우선적으로 적용된다.
단 더 구체적인 조건이 있다면 그것이 순서보다 우선된다.
9. html과 css에 대한 방법론
- class명은 그 class들의 역할로 짓는게 좋다
- 태그는 역할 단위로 제대로 계층 구조 만들어 놓는 것이 좋다.
- 태그는 가장 바깥 쪽 큰 틀 부터 안쪽으로 개발해 가는 것이 좋다.
- hover은 왼쪽으로 갈 수록(상위 요소에 달수록) 좋다. 스타일 적용은 오른쪽으로 갈 수록 (하위 요소에 적용할수록) 좋다.
