WECODE21 관대한 inline, 이기적인 block, 그리고 혼종 inline-block. HTML 처음 공부할 때 무조건 마주치는 문제 중 하나가 바로 inline, block 문제다... 나는 분명 한 줄에 넣고 싶은데 밑으로 내려가고.. 밑으로 내려갔으면 좋겠는데 한 줄에 다닥다닥 붙어버리고... 오늘은 이 문제를 해결해보도록 하겠다! 우선 이 문제들은 inline과 block, 두 개의 display 속성 때문에 벌어진 일이다. inline : 같은 줄에 위치 해도 Ok. 나는 관대하니까! block : 나는 하나의 블럭. 같은 줄에 나만 있어야 함! "하지만 나는 디스플레이 속성을 설정한 적이 없는걸..?🤔 " 물론 그럴 것이다. 왜냐햐면 위의 inline, block 속성은 각 태그 자체적으로 이미 가지고 있으니까! (그러니 자기들 맘대로 위치가 뒤죽박죽 되었던 것이다!) 자 그럼 .. 2021. 11. 2. CSS _ Position 3대장 을 만나보자. HTML로 웹페이지를 만들다 보면 내가 넣은 요소들이 내 맘대로 위치하지 않는다. (아주 자기들 멋대로다!) 그렇기 때문에 우리는 CSS 스타일로 내가 원하는 위치에 요소들이 위치할 수 있도록 position 속성을 조절해 주어야 한다. 자 그럼 이제부터 position 3 대장을 만나보자! 1 대장 relative -> 사전적 의미 : 상대적인 2 대장 absolute -> 사전적 의미 : 절대적인 3 대장 fixed -> 사전적 의미 : 고정된 사실 사전적 의미만으로 벌써 감이 잡힐 것이다. relative는 상대적으로 위치시키는 것이고 absolute는 절대적으로 위치시키는 것이고 fixed는 기냥 붙박이처럼 박제시키는 것이다! 설마 아직 감이 안 잡혔다고? 그럼 아래 예제 코드를 살펴보자! 1대장.. 2021. 11. 2. <img > 태그 와 {background-image} 의 차이를 알고 싶어? 웹페이지에 이미지를 넣는 방식은 크게 두 가지가 있다. 1번. HTML에서 태그를 활용해 넣는 방법. 2번. CSS 에서 background-image 속성을 활용해 넣는 방법. { background-image: url("이미지 링크"); } 그렇다면 이 둘의 차이점은 무엇인가? (줄여서 1번, 2번이라 지칭하겠음) 1번은 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있지만 2번은 그렇지 못하다. 1번은 HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 2번보다 좋다. 1번은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 2번은 자동으로 색인화하지 않기 때문에 검색 시 노출되지 않는다. (자세한 이유는 하단에) 그럼 이 둘을 어떨 때 사용하면 좋을까?.. 2021. 11. 1. 이전 1 2 3 4 다음