HTML CSS5 HTML 루비(ruby) 만들기 HTML 루비(ruby) 만들기 루비는 텍스트 상단에 붙은 작은 글씨는 보여줄 때 사용합니다. 루비 만들기에 사용하는 HTML 요소들에 대해 알아보겠습니다. ruby 태그 요소 루비를 만들 때 사용되는 태그는 ruby, rt, rp 요소들이 있습니다. 각각의 설명은 다음과 같습니다. ruby: 루비 텍스트를 사용할 영역을 지정 rt: 루비로 표시되는 텍스트 rp: 루비를 지원하는 않는 프라우저에서 괄호로 표시할 때 사용 ruby 태그 사용 예시 루비 태그는 다음과 같이 사용할 수 있습니다. 루비에 대해 알아봅니다. 루비는 프레이징콘텐츠phrasing content 라고 할 수 있습니다. 실행 결과는 다음과 같습니다. rp 요소를 사용하여 루비를 지원하지 않는 브라우저도 대비할 수 있습니다. 루비에 대해 .. 2022. 12. 9. HTML 코드를 입력한 대로 보여주고 싶을 때 pre 태그 코드를 입력한 대로 나타내고 싶을 때 html로 작업을 하다보면 코딩을 줄바꿈 형태까지 포함해서 입력한 대로 나타내고 싶을 때가 있습니다. 이미지를 사용하지 않고도 코딩 형태만 수정해서 간단하게 보여줄 수 있는 방법이 있습니다. pre 코드를 활용해서 코딩을 입력한 대로 나타내는 방법을 알아보겠습니다. pre 요소 pre 요소는 지정한 영역을 하나의 텍스트로 인식하게 만드는 명령어입니다. 즉, 이미 완성된 형태의 텍스트라고 인식하여 코딩 구문을 있는 그대로 표시해 줍니다. 비교해서 설명하겠습니다. 1. 코드를 그냥 입력했을 시 보통 코딩 형태를 html에서 그대로 입력하면 html이 자동으로 정렬하여 줄바꿈을 수정합니다. 위와 같이 코딩 구문을 정리하면 실행 결과는 다음과 같습니다. 2. pre 요소를 .. 2022. 12. 5. CSS 박스 모델 padding margin border CSS 박스 모델 HTML에서는 콘텐츠가 표시되는 영역에 보이지 않는 경계가 존재합니다. 그 경계는 박스 형태로 구분되며 CSS에서는 박스 모델이라고 부릅니다. 박스 모델에 사용되는 요소들로는 padding, margin, border 등이 있는데, 각각의 요소들에 대해 알아보겠습니다. 박스의 구성 요소 박스는 사각형 형태로 지정되며 테두리, 마진, 패더 영역 등으로 구성됩니다. 각 영역엔 CSS 스타일 변경을 통해 색과 크기 등을 조정할 수 있습니다. 박스가 구성되는 형태는 다음과 같습니다. 콘텐츠: 콘텐츠는 텍스트나 이미지 등이 들어가는 영역을 말합니다. 콘텐츠 영역은 height와 width 명령어로 사이즈를 조절할 수 있습니다. padding: 패딩은 콘텐츠 바로 위에 위치한 영역입니다. 콘텐츠의.. 2022. 11. 28. CSS HTML 글자 박스 크기 단위(em, rem, px, vmax, pt 등) CSS HTML 속성에 필요한 단위 CSS에선 디자인을 위한 다양한 요소들이 있습니다. 글꼴이나 박스 등의 크기는 단위를 지정하여 조절합니다. CSS에서 사용되는 단위 요소에는 어떠한 것들이 있으며 어디에 사용되는지 살펴보겠습니다. CSS HTML 단위의 종류 em 글자 크기나 박스 크기를 설정할 때 사용합니다. 1em은 부모 요소에서 설정된 기본 크기를 의미합니다. rem 글자 크기를 조절할 때 사용합니다. 1rem은 html에 설정된 기본 글자 크기를 의미합니다. 1rem의 표준 크기는 16픽셀입니다. vw vw는 viewport width의 약자입니다. 1vw는 뷰 포트의 넓이의 1/100을 의미합니다. 100vw는 뷰 포트(브라우저 화면) 전체를 다 사용한다는 뜻입니다. vh vh는 viewpor.. 2022. 11. 23. 이전 1 2 다음
