평소 잘 알았다고 생각했던 ,,, html과 css였지만 ,,, 막상 설명해보라고 하면 어버버 .. ..하는 내용도 있었고 새롭게 알게된 내용이 있었다 !
그런 내용을 위주로 정리 가보자고 ~
1일차
<!DOCTYPE html>
위의 코드는 독타입이라고 읽고, 문서의 버전은 living standard이다.
html5 버전을 의미하는 코드인줄 알았는데, 5 버전을 포함한 최신 기술을 기준으로 삼겠다는 일종의 약속을 의미한다. 독타입을 선언해야 최신 버전의 html 기술이 적용되니 필수 작성 필수 ~
html5 이전에는 living standard 버전과 달리, 아주 길고 ~ 복잡한 ~ 그런걸 사용한다.
이전 버전의 독타입은 함부로 수정하면 참고 기술이 달라져 오류가 날 수 있으니 그러지 말 것 ~
- html4 독타입 선언 예시: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">;
Html Tag
- tag를 사용하는 이유
html은 정보 전달을 위해서 사용되는 마크업 언어이고, 이때 효과적인 정보 전달을 위해 역할을 가지고 사용되는 것이 tag이다 ! tag를 적절하게 사용하면 아래 3가지의 장점이 생긴다. 실무에서 시멘틱 태그를 잘 활용하기 위해 꽤나 노력했었는데, 역시 그게 올바른 방향의 노력이었다.
- 검색엔진 최적화
- 코드 가독성 향상
- 소스코드 구조화
CSS Selector
- Type Selector
타입 셀렉터란, css에서 선택자로 태그를 선택하는 것을 뜻한다. 결국 태그 선택자와 같은데, 타입 셀렉터라고 말해야 한다는 내용을 처음 알았다 ! 기억해두자요 ~
- Universal Selector
기존에 ' * ' 로 알고 있는 애다. 별 셀렉터라고 하지 말고 유니버셜 셀렉터로 제대로 불러주자
Default Style
- initial value
초기값은 css의 프로퍼티 자체에 부여되어 있는 값이다.
- background-color의 초기값 : transparent
- width, height의 초기값 : auto
종종 부여된 스타일을 취소해야 할 때(예를 들면 스와이퍼 슬라이드 css) 개발자 도구에서 inherit 값을 사용했다. inherit 속성을 사용하면, 해당 프로퍼티 자체의 초기값이 설정되는 것이라는 걸 새로 알게 되었다.
mdn에서 초기값을 확인할 수 있으니 종종 확인해봐야겠다 ~ !
물론 부모에게 상속받을 프로퍼티가 있다면 그게 적용됨
- User agent stylesheet
css를 만든 개발자들이 부여한 프로퍼티의 초기값, 즉 initial value와 다르게 유저 에이전트 스타일시트는 브라우저별로 부여한 기본 세팅값이다. 브라우저별로 부여했기때문에, 브라우저마다 조금씩 스타일이 다르다. 이 내용은 개발자 도구에서 확인 가능하다.
예전에 잘 사용하지 않는 프로퍼티를 사용하면서, 뭔가 계속 ,,, 계속 안되서 ,,, 반나절 고생했던 적이 있었는데 ... (무슨 프로퍼티였는진 기억이 나지 않는다 ㅎ) 그 이유가 브라우저가 멋대로 부여한 스타일 때문이었다. 이젠 초기 세팅값과 관련한 2가지 값을 알았으니 다음에 똑같은 상황에선 더 멋지게 해결할 수 있겠다.
부사수: "주임님,,, 이거 왜 안되는걸까요 ..?"
나: "이거 User agent stylesheet로 선언된 프로퍼티가 적용되서 그렇네요. ^^"
margin: auto
- margin left, right: auto 적용 가능
- margin top, bottom: auto 적용 불가
마진을 통해 상하 정렬을 사용하진 않았었지만, 왜 auto가 적용되는지에 대해서 생각해본 적은 없는 것 같다. 마진 상하의 auto가 적용안되는 이유를 알려면 우선 containing block에 대해 알아야 한다.
- Containing block
직계 부모가 제공해주는 컨텐츠 영역으로, width와 height에 적용되는 개념이 다르다.
- width containing block만큼 여백을 가질 수 있고, 컨텐츠를 제외한 가용 영역을 여백으로 사용할 수 있음
- height containing block이 아닌, 내부 컨텐츠 만큼만 영역을 차지하기 때문에 여백으로 사용할 수 있는 가용 영역이 존재하지 않음
위의 이미지는 존경하는 종찬쌤께서 공유해주신 이미지다. 이것만 보면 이해 쌉가능;
한마디로 정리해보자면, margin 좌,우는 가용영역만큼 여백을 줄 수 있어서 중앙 정렬이 가능하며 margin 상,하는 가용 영역이 없기 때문에 여백/중앙정렬이 불가능하다.
2일차
Inheritance
이건 바로 상 ~ 속이라는 개념이다. 아버지 돈이 내 돈 ₩ 뭐 그런 ~ 느낌 !
우선 css에는 상속 Yes 특성을 가진 프로퍼티(예: color)와 상속 No 특성을 가진 프로퍼티(예:background-image)가 존재한다. 이 상속은 영향을 주는 것과 조금 헷갈릴 수 있다.
- 상속 부모에 할당된 color를 자식에 할당하지 않아도 적용되는 것
- 영향 width와 같이 값이 그대로 상속되진 않지만, 영향을 받는 것
ㄴ width: containing block으로 영향을 줌
ㄴ background-color: 자식의 배경 초기값이 투명색이라 영향을 받는 것처럼 보일 수 있음
예전에 filter:blur 속성을 사용했던 하위 요소에서 transition이 적용되지 않아서 무진장 고생을 한 적이 있다. 그땐 이유를 명확하게 알지 못해서 정말 이것 저것 많은 걸 시도했었는데, 상속과 영향으로 그 오류를 살펴보자면 영향이라고 할 수가 있겠다 !
Block-level element, Inline element
실무에서 원하는대로 padding, margin, width를 조절하기 위해 냅다 때렸던 display: inline-block에 대해 정확히 짚어볼 수 있었다.
- inline 텍스트의 성질을 가짐, length 개념이 적용됨
- block 박스의 성질을 가짐, width의 개념이 적용됨
- inline-block 텍스트(line)에 놓여진 상자 느낌, inline과 block의 장점을 지님
inline에는 적용되지 않았던 여백과 크기 조정 .. ! 당연했다. 텍스트 라인에 놓인 요소에 여백과 높이를 줄 수 없는데 줄노트의 비유가 딱이었다. inline 요소는 줄노트에 작성된 것이라 이미 존재하는 줄간격을 넘거나 무시할 수 없다. line-height 개념은 ~ 아직 무르익지 않아서 배우기 전이다!
border-radius: n / n;
오늘 아주 기함을 금치 못했던 바로 그 내용 ... ! border-radius가 나왔다.
위의 이미지처럼 프로필 이미지의 border-radius는 난생 처음 본 모양이었다 ... 나름 실무 경력이 2년이 넘는디 ; 쩝 ~ ㅎ 그래서 후다닥 슨생님께 "css로 구현 가능한게 맞나요 .. ?"하고 첫 질문까지 드려버렸다. "그거 이미지예요 ^^"라는 답변을 기다렸던 내겐 결과가 아주 아주 충격적이었다.
슬래시를 통해 두 개의 각을 다르게 설정할 수 있다 ... ! 이야 세상 좋다 ~
나중에 필요한 일이 생기면 ! 제너레이터를 활용해야겠다. 요거 꼭 기억해야쥐 ~
letter-spacing
요 프로퍼티를 사용할 땐, px보단 em 단위 사용을 권장한다 ! 이유는 폰트 사이즈가 커지고 작아지는 비율과 동일하게 자간이 넓어지고 좁아지기 때문이다. 조금 찾아봤더니, 16px 기준으로 1px을 의미하는 값이 있어서 공유한다.
body {
letter-spacing: 0.0625em; // -1px
letter-spacing: -0.0375em; // -3.75%
}- rem이 아닌 em을 사용하는 이유
em현재 폰트 사이즈의 배수rem최상위 요소 폰트 사이즈의 배수
동일하게 상대단위인 rem은 루트를 기준한 배수가 적용되고, em을 사용하면 letter-spacing을 적용한 폰트사이즈를 기준하여 배수가 적용되기 때문에 letter-spacing에는 em을 사용하는 것이 적절하다.
127.0.0.1
이건 개발자 조 - 크를 따라가기 위해서 회고해본다 ! ㅎ 개발자들 사이에선 집 ... 이라고 한단다 ~ 메모 ~
해당 아이피 주소는 루프백, 또는 로컬호스트 주소로 불리는 주소이다. 위의 주소를 통해서 로컬 호스트 주소로 사용할 수 있는데 단, 실제 IP 주소처럼 다른 컴퓨터와의 통신은 불가능하다.
- 그런데 사용하는 이유는?
127.0.0.1 주소로 데이터를 전송하면, 데이터가 수신측으로 다시 라우팅된다. 즉 로컬 시스템을 원격 시스템인 것처럼 사용이 가능한 것이다. 이렇게 되면, 로컬 내에서 서버-클라이언트 구조를 만든 셈이 된다는데 아직 무슨 말인진 잘 모르겠다. 아무튼 로컬에서 전송한 데이터를 다시 라우팅 받을 수 있어서 loop back 주소로 불리기도 하나보다 ~!
이렇게 정리를 하고보니 새롭게 알게된 / 제대로 알게된 내용이 정말 많다.
익숙하고 잘 알고 있다고 생각한 html과 css였는데, 강의 퀄리티가 넘나리 좋은 것 같다 !
역시 css에 me친자(님)는 좀 다르다 ... 앞으로도 열심히 수업 들어야쥐 ~
