온라인 멘토와 함께하는 공부/HTML43 [CSS] font-style 속성에서 italic과 oblique font-style 속성에서 italic과 oblique font-style 속성에서 italic과 oblique은 모두 글자를 기울게 하는 스타일을 지정하지만, 미묘하게 다른 의미를 가지고 있습니다. Italic (italic): 이탤릭체는 글자의 슬랜트(slant)가 기울어진 스타일을 의미합니다. italic을 사용할 때, 대부분의 경우 글꼴에 포함된 이탤릭 스타일의 글리프를 사용하게 됩니다. 이는 일반 글자와 다르게 디자인된 별도의 글리프로, 각 글자의 모양이 자연스럽게 기울어져 있습니다. 이탤릭체는 일반체와 구별되며, 보통 강조나 인용 구문에 사용됩니다. Oblique (oblique): 오블리크체는 글꼴이 이탤릭체를 별도로 제공하지 않을 때 사용되는 기울기 스타일입니다. 오블리크체는 일반 글자를.. 2024. 1. 20. [CSS] 인라인(inline) 요소 정의에 쓰이는, span span 태그 태그는 HTML에서 인라인(inline) 요소를 정의할 때 사용되며, 스타일을 적용하거나 특정 부분의 내용에 대해 식별을 할 때 유용합니다. 태그 자체는 어떤 시각적 변화도 주지 않지만, CSS를 사용하여 스타일을 추가하거나 JavaScript로 특정 부분을 조작할 때 식별자로 사용할 수 있습니다. 여기 몇 가지 태그의 주요 특징과 사용 방법을 설명드리겠습니다. 인라인 요소: 태그는 인라인 요소로, 문서의 흐름을 방해하지 않고 텍스트 중간에 삽입될 수 있습니다. 스타일링: 태그는 특정 텍스트 부분에 스타일을 적용하기 위해 사용됩니다. CSS 클래스나 스타일을 직접 적용하여 글자의 색상을 변경하거나 글꼴을 다르게 설정할 수 있습니다. 구분과 강조: 은 문서 내에서 특정 부분을 구분하거나 강조.. 2024. 1. 19. [CSS] 패딩(padding)까지는 내 몸 CSS에서 패딩(padding) 패딩은 CSS(Cascading Style Sheets)에서 중요한 속성 중 하나로, 웹 요소의 내부 여백을 지정하는 데 사용됩니다. 패딩은 해당 요소의 테두리(Border)와 내용(Content) 사이의 공간을 제어하며, 요소의 크기를 조절하지 않고 내용과 테두리 사이의 여백을 설정하는 데 도움이 됩니다. 패딩의 네 가지 방향 설정: padding-top: 요소의 위쪽 패딩을 지정합니다. padding-right: 요소의 오른쪽 패딩을 지정합니다. padding-bottom: 요소의 아래쪽 패딩을 지정합니다. padding-left: 요소의 왼쪽 패딩을 지정합니다. 패딩 값을 지정: 픽셀(Pixel), 백분율(Percentage), em 등 단위를 사용하여 패딩 값을 설.. 2024. 1. 18. [CSS] grid로 정렬하기 grid로 정렬하기 CSS의 Grid 레이아웃은 웹 페이지의 레이아웃을 디자인하는 강력한 2차원 레이아웃 시스템입니다. 이 시스템을 사용하면 행과 열을 기반으로 한 복잡한 레이아웃을 쉽게 구현할 수 있습니다. Grid 레이아웃의 기본 개념 컨테이너 (Container): Grid 레이아웃은 Grid 컨테이너 안에 위치한 아이템들을 배치합니다. 컨테이너를 생성하기 위해, CSS의 display 속성에 grid 또는 inline-grid 값을 사용합니다. 아이템 (Item): Grid 컨테이너 내부의 직접적인 자식 요소들을 Grid 아이템이라고 합니다. 행 (Row)과 열 (Column): Grid 레이아웃은 행과 열의 집합으로 구성됩니다. 이를 통해 복잡한 레이아웃을 구성할 수 있습니다. 셀 (Cell):.. 2024. 1. 17. [CSS] 유연한 박스 레이아웃, CSS Flexbox 유연한 박스 레이아웃, CSS Flexbox CSS Flexbox, 공식적으로 유연한 박스 레이아웃(Flexible Box Layout)이라고 불리는 이 기술은 웹 페이지의 요소를 효율적으로 배치, 정렬, 그리고 분배하기 위한 일차원 레이아웃 모델입니다. Flexbox는 복잡한 레이아웃을 단순화하고, 유연한 UI 디자인을 가능하게 합니다. Flexbox의 기본 개념 플렉스 컨테이너 (Flex Container): Flexbox 레이아웃을 적용할 부모 요소입니다. 이 컨테이너 안의 자식들은 플렉스 아이템이 됩니다. 컨테이너를 생성하기 위해, CSS의 display 속성에 flex 또는 inline-flex를 설정합니다. 플렉스 아이템 (Flex Item): 플렉스 컨테이너 내부의 모든 직접적인 자식들은 플.. 2024. 1. 16. [HTML] HTML에서 이미지를 사용하는 방법 HTML에서 이미지를 사용하는 방법 HTML에서 이미지를 사용하는 방법은 여러 가지가 있으며, 각각의 방법은 웹 페이지 내에서 이미지를 다르게 표현할 수 있게 합니다. 기본적인 이미지 삽입부터 시작하여, 좀 더 복잡한 이미지 처리 방법까지 자세히 알아보겠습니다. 1. 기본 이미지 삽입 HTML에서 태그를 사용하여 이미지를 삽입합니다. 태그는 닫는 태그가 필요 없는 빈 태그(empty tag)입니다. src 속성: 이미지 파일의 경로를 지정합니다. alt 속성: 이미지의 대체 텍스트를 제공합니다. 이미지가 로드되지 않을 때나 스크린 리더가 사용될 때 표시됩니다. 2. 이미지 사이즈 조절 이미지의 크기를 조정하려면 width와 height 속성을 사용합니다. 3. 이미지 링크 만들기 이미지를 클릭하면 다른 .. 2024. 1. 7. 이전 1 2 3 4 5 ··· 8 다음
