dev/html & css (3) 썸네일형 리스트형 [CSS] layout - display 나는 그런 고민을 해본적이 있는가? 얘네는 왜 붙어있고 얘네는 왜 안 붙어있는지 이것저것 넣어보고 해결되면 그걸 해결하는 과정이라 생각할 수 있는가? 적어도 난 아니다 이번엔 안 붙고 안 떨어지는 대표적인 이유인 디스플레이 요소에 대해 알아보자 대부분의 html 요소는 inline 또는 block 둘 중의 하나의 요소를 가진다 굳이 따로 지정하지 않더라도 은 인라인 요소 는 블럭요소를 기본적으로 내포하고 있다는 것을 우린 알고 있다 몰랐다하더라도 이제 알면 되니까 괜찮음 ㅋㅋ 블록(block) 언제나 새로운 라인(line)에서 시작하며, 요소가의 너비가 해당 라인의 모든 너비를 차지한다 따라서 포지션 속성으로 따로 위치를 지정해주지 않는 한 블록요소끼리는 같은 라인을 공유하지 않는다 display:inl.. [CSS] layout - position 내가 css를 건들 때마다 시간을 잡아먹는 요소는 뭐가 있을까? 오타? 모르는 속성? 아니 단언컨데 나같은 코린이는 레이아웃 짜는게 제일 힘들거다 왜 얘는 가운데로 안 가지? 왜 얘네는 정렬이 안 맞지? 왜 니네는 붙어있고 니네는 붙질 못하니.. 방금도 replit 풀면서 아차 싶었던 순간만 몇번인지 셀 수가 없다 레이아웃 관련 속성들을 아주 손바닥에 타투로 넣고 싶을 정도다. position 속성은 html 요소가 위치를 결정하는 방식을 설정한다 결정하는 방식에는 다음과 같이 4가지가 있다. 정적 위치(static position) 상대 위치(relative position) 고정 위치(fixed position) 절대 위치(absolute position) 정적 위치(static position) H.. img 태그와 백그라운드 이미지에 대하여 [WEB] semantic web & semantic tag 위의 글에서 이어집니다! 먼저 보고 오세용 우리는 앞서 시맨틱 웹이 그래서 어떤 것인지 맛만 좀 봤고 시맨틱 태그를 쓰고 쓰지 않고가 어떠한 차이가 나는지도 맛을 좀 봤다 이미지를 표시하는 방법에는 HTML의 img 태그를 이용하는 방법과 CSS의 background-image 를 이용하는 방법이 있는데 img 태그는 어떠한 이유로 이미지를 로드할 수 없을 때의 상황도 가정하고 있다 alt의 값이 바로 그 로드할 수 없을 때의 상황을 대비한 것! 그럼 뭔가 백 그라운드 이미지를 사용하는 것이 img 태그를 이용하는 것의 하위호환인 느낌이 들 수 있지만 그저 서로 다른 것 뿐이라고 생각한다 예를 들어 우리가 어떠한 사이트를 만든다고 했을때 꼭 필.. 이전 1 다음