이미지

<img alt="HTML" src="https://velog.io/@rimi0108"> 

• alt : 서버에서 이미지가 삭제되거나 잘못된 주소일 때 이미지 대신 보여줄 텍스트
• src : 이미지 파일 경로 or 이미지 url 주소
• 가로, 세로 중 하나의 값만 입력해도 브라우저에서 알아서 같은 비율의 크기로 줄어듬.

Block vs Inline

Block element

• 대부분의 HTML 요소들은 Block 요소이다.
• <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등은 모두 block 요소에 해당하는 태그들이다.
• block 요소의 의미
  • 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다.
  • 한 줄을 점유하는 속성이다.
  • 다음 태그는 무조건 줄바꿈이 적용된다.

Inline element

• 요소끼리 한 줄에 위치 가능
• width/height 적용불가
• margin/padding-top/bottom 적용불가
• line-height를 원하는대로 사용할 수 없다.
• Inline 성질을 갖게 하는 CSS 속성들
  • float , display
  • display: none;
    • 화면의 요소가 보이지 않게 하는 속성값
    • 인터렉티브한 웹을 구현할 수 있다.
      • 클래스 이름에 따라 요소에 display: none; display: block; 이 있었다 없었다 하며 요소를 보이게 / 안 보이게 만들 수 있다.

Block vs Inline

• block 요소는 항상 새 줄에서 시작하며, 좌우로 최대한 늘어난다.
• inline 요소는 텍스트 만큼의 영역만 차지한다. 만약 두 개의 inline 요소를 나란히 놓는다면, 같은 줄에 위치할 것이다.
• 대부분 inline, block 성질을 통해 태그가 결정되지만, CSS를 통해 성질을 바꿀 수도 있다.

Inline-block

• Inline-block은 Inline 속성의 특징과 block 속성의 특징을 둘 다 가지고 있는 속성이다.
• 기본적인 특징은 inline 속성과 비슷한데 (줄바꿈을 하지 않고, 동일한 라인에 작성가능) inline 속성에서 할 수 없었던 width/height 변경 및 line-height를 커스텀하게 적용할 수 있는 특징이 있다.
  • width/height 적용 가능
  • margin/padding-top/bottom 적용 가능
  • line-height 적용 가능

Margin auto

레이아웃

• block 요소라도 width 값을 주면 width 값에 맞게 화면을 차지하게 된다.
• 이 때 margin: auto;를 사용하면 요소를 가로 중앙에 오게 만들 수 있다.

p {
  margin: 20px auto;
}

• margin 값
  • 1개의 margin 값 : 사방 모두 같은 값을 줌
  • 2개의 margin 값 : 첫번째 값 - 위, 아래의 값 | 두번째 값 - 왼, 오른쪽의 값
  • 4개의 margin 값 : 위, 오, 아래, 왼 순서의 값

Position - absolute

• 이제까지 HTML 코드를 작성하면, 작성한 순서대로 페이지에 그려졌다.
• position 프로퍼티를 사용하면, 그리고 싶은 어느 위치에나 요소를 그릴 수 있다.
• position 프로퍼티는 또한 복잡한 레이아웃을 만들 때 유용하다.

relative & absolute

• position: relative;
• position: absolute;

relative 상대적

• position: relative; 자체로는 특별한 의미가 없다.
• 위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있다.
  • 위 프로퍼티는 position이라는 프로퍼티에서만 적용된다.

.top-20 {
  top: -20px;
  left: 30px;
}

• 위를 적용하면 위로 20px 만큼 이동하고, 왼쪽에서 30px 만큼 떨어진다.
• 마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라간다.

absolute 절대적

• 절대적인 위치에 둘 수 있다.
• 특정 부모의 기준에 따라 절대적으로 움직이게 된다.
  • 부모 중 position이 relative, fixed, absolute 중 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 된다.
• 일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 된다.
• absolute 값을 갖게 되면, 내용의 크기만큼만 가로크기가 된다.

Position - fixed

• 뷰포트에 상대적으로 위치가 지정된다.
• 페이지가 스크롤되더라도, 늘 같은 자리에 위치한다.
• fixed는 말 그대로 고정되었다는 뜻이다.
• absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없다.
• fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.

레이아웃

• HTML은 원래 위에서, 아래로 블록 수준 요소들을 순차적으로 나열한다.
• 하지만 우리가 구현해야 하는 것은 단순 나열이 아니다.
  • 신문의 레이아웃처럼 다단 구성을 해야할 수도 있다.
  • 페이지의 임의 위치에 이미지나 텍스트를 자유롭게 배치할 수 있어야 한다.

<div> 태그

• 레이아웃이라고 특별할 것은 없다.
• 웹 페이지 레이아웃은 어떤 정보를 페이지의 어떤 영역에 넣느냐에 관한 문제이다.
• div태그는 자식태그, 즉 div태그 내부에 있는 내용이나 요소의 크기에 의해 세로가 결정된다.
• div의 가로크기는 화면의 가로크기만큼이다. 이렇게 화면 전체를 차지하는 요소를 block 요소라고 하며 p, header, h1등이 block 요소이다
• CSS에서 정보 배치 단위를 정의하기 위해 널리 사용되는 태그가 바로 <div> 이다.
  • 요소를 하나의 논리적인 그룹으로 묶거나, 페이지의 구획을 정의할 목적으로 사용된다.
  • <div> 태그는 만들고 나면 class나 id를 부여하여 각각의 스타일을 적용하게 된다.
  • 그러나 id를 적용하면 우선순위가 아주 높다보니 다른 스타일 속성을 쉽게 무력화 시키게 된다.
  • id를 범용하면 #home #banner #nav 와 같이 길고 복잡한 selector를 사용해야 하니, id 대신 class를 더 자주 쓰는 것이 좋다.
  • 물론 한 페이지에 단 하나만 있을법한 논리적인 구분은 id로 해도 된다.
    • 예를 들어 전체 페이지를 감싸는 #login-page
    • 환영 팝업인 #welcome-popup
  • HTML5에서는 Semantic tag가 div tag를 대신 할 수 있다.

float 기반 레이아웃

• float 은 주로 이미지 주변의 텍스트를 감싸기 위해 만들어진 프로퍼티이다.
• 하지만 페이지 전체의 레이아웃을 잡을 때도 중요한 도구가 된다.
• float 속성은 이전에 레이아웃을 잡을 때 정말 많이 사용되었지만 요즘은 flex 속성을 기반으로 하여 레이아웃을 잡는 경우가 많다.

float 사용 예제

• float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다.
• 그런데 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어난다. 그래서 float을 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있다.

float 문제 해결

clear

• float을 해결하려면 clear라는 속성이 필요하다.
• float 요소 옆에 채워지는 요소들에게 적용하는 프로퍼티이다.
  • 바깥 div 마지막에 아무태그나 넣고 clear 속성을 적용한다. 이 기법을 사용할 때에는 HTML코드를 더 입력해야 하는 부담이 있다.
  • 주로 많이 사용하는 방법인데 바깥 div에 overflow: hidden; 을 주는 것이다.
  • 바깥 div를 float시킨다. 그러면 자식의 float 높이를 인지하여 그만큼 높이를 차지하게 된다. 하지만 이것도 문제가 있다. float이 되어버려 block 요소의 성질이 없어지게 된다. 이러면 width를 100% 추가하거나 해야한다.

<참고>

• https://ruden91.github.io/blog/inline-vs-block-vs-inline-block/