1. 학습내용

실습내용

github 소스링크

학습 및 상기 내용

넘어가는 글자 ... 처리

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

max-width

최대 폭을 정해놓고 그 길이를 넘어가면 ...처리 되도록 max-width와 ... 공식 3가지를 활용

#news-main .news-left .news-main-wrap .news-main-body .news-lists li a {
	display: inline-block;
	max-width: 360px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	vertical-align: middle;
}

주의점

사이트 작업할 때 공통된 요소를 뽑아내고 배치할 때 하나를 들어내는(커스텀이 일어나도) 기본 레이아웃에 변화가 없게 세팅하는 것이 중요

그래야 코드 재사용 가능

position과 flex 연습이 많이 필요

예시

아까 위에 max-width사진에서 오른쪽 아이콘을 전부 한줄로 정렬하고 싶다.

max width를 width로 바꿔주면 li의 width가 똑같아지기 때문에 icon은 width 옆에 배치됨

width: 360px;
	max-width: initial;

cursor

a태그에 마우스를 가져갔을 때 커서가 안나오게 하는 것은 css로 가능, 클릭이 안되게 하는 것은 javascript로 해야함

cursor: default;

em vs strong

strong은 중요성, 심각성, 긴급성이 있는 부분에 쓰는 것이고 문장의 의미를 바꾸지 않는다.

em은 컨텐츠에서 강세를 주고싶은 부분에 쓰는 것이고 문장의 의미를 바꾼다.

strong과 em을 각각 중첩해서 사용함으로써 중요성이나 강조의 상대적인 정도를 증가시킬 수도 있다.

css 우선순위

1. 속성 값 뒤에 !important 를 붙인 속성

2. HTML에서 style을 직접 지정한 속성

3. #id 로 지정한 속성

4. .클래스, :추상클래스 로 지정한 속성

5. 태그이름 으로 지정한 속성

6. 상위 객체에 의해 상속된 속성

작업물

2. 어려운점

오늘 시험을 봤는데 모르는 문제가 없을줄 알았는데 처음보는 부분이 있었고 그리고 position에 관해 의문이 드는 문제가 있었다.

3. 해결방법

배우지 않은 부분은 검색을 통해 알아 볼 수 있었다.

position에 관한 부분은 지금 생각해도 답이 두개라고 생각되지만 조금 더 고민해봐야겠다

4. 소감

역시 커스텀을 생각하고 레이아웃 구조를 짜는것이 가장 중요한것 같다. 어제의 물음에 대한 답이 오늘 수업에 살짝 나왔는데 어떤 내용을 만들고 클라이언트가 커스텀을 요청해서 수정했을 때 레이아웃의 구조가 깨지지 않게 만드는게 중요하다고 했다. 그런식으로 짜야 코드를 재활용 할 수 있다고도 들었다. 느낌은 알겠는데 아직 어떤식으로 코드를 짜야할지 감이 잘 오지않는다.

postion과 flex를 더 많이 연습해봐야겠다.