[배운내용]

네이버 블로그 페이지

(???)

검색버튼과 통합검색 버튼의 높이가 딱 맞지않고 뒤틀린 경우.
-> 두 가지를 감싸고 있는 .blog_header_input_wrap에 문제가 생긴 경우임. 해당 클래스에서 border값을 없애줬을 때 해결됐음.

(???)

네이버에서 flex가 아니라 번거롭게 float을 쓰는 이유는???
-> 익스플로러 하이버전에서 flex가 호환되지 않기 때문 !
그러므로 웹사이트 작업을 할 때 어떤브라우저의 어떤 버전까지 호환되도록 할지에 따라 작업난이도가 결정된다고 볼 수 있겠다.

블로그 중간파트

배경색 등을 투명하게 표현하고 싶을 때

• #000000와 같은 hex컬러로 입력하고, 다음 줄에 따로 opacity를 지정해주는 방법
• rgba(0, 0, 0, 0)에서 마지막 입력 자리에 투명도를 입력해주는 방법이 있다.

rgba로 하는 것이 한 줄로 표현할 수 있기 때문에 코드가 짧아져서 좋다.

▒TIP▒
hex 컬러만 알고 있는데 rgba로 표현하고 싶을 때
'hex converter'검색하여 hex색상번호를 입력하면 rgb코드로 출력됨 !

letter-spacing : 자간을 설정하는 태그

• letter-spacing: normal;
• letter-spacing: 1px; (-> 더 멀리)
• letter-spacing: -1px; (-> 더 가깝게)
• letter-spacing: 0.2em;
  (-> 상대적인 숫자로, '현재 글자크기의 *배'를 의미한다

말줄임 효과

: 두 줄, 세 줄 등 특정 시점에서 글의 내용을 말줄임표로 줄여서 표현하는 방법

[ex]

.ellipsis{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

→ 두번째 줄에서 말줄임.

▒TIP▒
아직 배우기 전단계이므로 구글에서 'css 말줄임 두줄'등으로 검색해서 사용할 수 있다.

[어려웠던 점]

오늘 수업에서는 선생님께서 header에서는 id를 사용하시고, main에서는 class를 사용하셨던 것에 의문이 생겼다.
그리고 id나 class명은 되도록 간결하고 짧게 적는게 좋다고 하셨는데, 이번 실습에서는 너무너무 길어지는 느낌이 들어서 나만 의아한가..싶다.

[해결방법]

해결방법은 딱히 없는 것 같다. 강사 선생님께 직접 질문을 할 수 있는 수업구조가 아니다보니 왜 class를 쓰셨는지 여쭐수가 없고, class명은 앞으로 내가 더 고민하고 만들어야 할 문제이기 때문이다.

[학습소감]

요즘은 하면 할수록 잘 하고 있는 건가 싶기도하고, 답답한 마음이 들기도 한다. 그래도 이또한 성장의 한 단계라고 생각하고 더 열심히 해볼 생각이다.
아, 그리고 실습 강의에서 어떻게 개발일지를 적어야할까 고민이 좀 많았는데, 코드를 여기 입력하고 수업내용을 적다보니, 그냥 여기서는 이렇게 했다~하고 수업을 그대로 옮기는 느낌이 들어서 이제 코드는 깃허브에 올리고 나도 배운내용만 간결하게 정리하는 연습을 좀 하도록 해야겠다고 생각했다.