[대구AI스쿨] 210729 개발일지_24

권민경·2021년 7월 29일

대구AI스쿨

목록 보기

24/44

[배운내용]

네이버 뉴스 페이지 실습

▒TIP▒
flex관련 속성들은 따로 클래스를 만들어서 필요한 곳에 클래스를 추가로 넣어주는 것이 코드 분량을 줄일 수 있는 좋은 방법이다.

- placeholder : 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말을 명시하는 태그이다.

개념 참고사이트: TCP School
More about 'placeholder'

- article : 신문기사, 블로그의 글등을 작성할대 사용한다. 서로 연관이 없는 독립적인 글을 쓸 때 사용한다.
(연관있는 내용에 대해 쓸 때는 section태그를 사용한다.)
이 태그에는 반드시 타이틀정보가 들어가야한다. 즉,article다음에는 h1~h6태그가 하나 들어가야한다.

참고사이트

▒TIP▒
실습시 자바스크립트기능을 없애주는 방법
- 크롬의 검사창의 톱니바퀴모양 설정아이콘을 클릭하면, 개발자도구를 커스텀할 수 있는 창이 생성 된다.
- 'Preferences - Debbugger - Disable Javascript'를 선택해준다.

overflow:hidden 속성의 특징

1) 넘쳐 흐르는 자식요소의 넘친 부분을 보이지 않게 한다.
2) 넘쳐 흐르는 자식요소를 포함하도록 크기를 늘린다.

부모에 고정된 height 속성이나 width 속성이 있을 경우는 (1)처럼, 없는 경우는 (2)처럼 동작한다.

그런데 부모에게 width,height속성이 없더라도 자식요소에 position:relative속성을 주어 자식을 부모밖으로 이동시키면 (1)번 현상이 일어나서 자식요소가 완전히 화면에서 사라진다. 이렇게 의도적으로 외부로 빼내어 보여주고 싶은 요소까지 전부 지워버리므로 overflow hidden속성을 사용하는 것은 완전히 깔끔한 방법은 아니다.

참고사이트
:티스토리 블로그 'C언어 예술가'

[어려웠던 점]

#news_headline .news_headline_lists li{
	width: 255px;
	height: 178px;
	border: solid 1px #ccc;
}

#news_headline .news_headline_lists li a{
	display: block;

	width: 100%;
	height: 100%;
}

#news_headline .news_headline_lists li a article{
	position: relative;

	width: 100%;
	height: 100%;
}


#news_headline .news_headline_lists li a article h3{
	width: 100%;
	height: 44px;
	line-height: 44px;

	text-align: center;
}


#news_headline .news_headline_lists li a article .image_wrap{
	position: relative;

	width: 100%;
	height: 132px;
	background-color: pink;
}

#news_headline .news_headline_lists li a article .image_wrap img{
	position: absolute;

	width: 100%;
	height: 100%;
}

#news_headline .news_headline_lists li a article .image_wrap .overlay{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#news_headline .news_headline_lists li a article .image_wrap .overlay .headline_info{
	position: absolute;
	width: 100%;
	padding: 15px 20px;

	left: 0;
	bottom: 0;
	color: #ffffff;
}

#news_headline .news_headline_lists .headline_info i{
	display: block;
	width: 26px;
	height: 26px;
	background-color: black;
	border-radius: 50%;

	margin-right: 10px;
}

#news_headline .news_headline_lists .headline_info div{
	width: calc(100% - 40px);
}

#news_headline .news_headline_lists .headline_info span{
	font-size: 13px;
	font-weight: bold;
}

#news_headline .news_headline_lists .headline_info p{
	display: inline;
	font-size: 12px;
}

이 부분에서 i태그와 div태그가 x축으로 정렬되어야하는데, y축 정렬로 쌓이는 현상이 생겼다. 똑같이 코드를 작성한 강사님은 양옆으로 정렬이 되었는데, 내가 작성한 코드에서는 오류가 생겼다.

메인파트를 할 때, left, right에 float을 주고 부모에게 왜 overflow: hidden값을 주는지 이해가 안되어 본문에 속성에 대한 개념을 정리해 두었다.

[해결방법]

좌우 정렬이 되어야하는 i,div태그에 display:inline-block 을 지정해주었다.

#news_headline .news_headline_lists .headline_info i{
	display: inline-block;
	width: 26px;
	height: 26px;
	background-color: black;
	border-radius: 50%;

	margin-right: 10px;
}

#news_headline .news_headline_lists .headline_info div{
	display: inline-block;
	width: calc(100% - 40px);
}

#news_headline .news_headline_lists .headline_info span{
	font-size: 13px;
	font-weight: bold;
}

#news_headline .news_headline_lists .headline_info p{
	display: inline;
	font-size: 12px;
}