본문 바로가기

HTML5 & CSS315

HTML5 & CSS3 배워보자 (15화 : 여백 관련 속성) 박스 모델의 여백인 마진과 패딩을 조절해 디자인 하는 법에 대해 공부해 보겠습니다. 마진과 패딩은 박스 모델에서 활용도가 높으며 웹 문서에서 이미지나 텍스트 등 여러 요소를 자유롭게 배치할 때 유용하게 사용됩니다.   1. 마진(margin) 속성마진(margin) 속성은 HTML 요소 주위의 여백을 설정하는 데 사용됩니다. 마진은 요소 외부의 공간을 의미하며, 다른 요소들과의 간격을 조절하는 데 매우 유용합니다. 마진 속성은 네 가지 방향으로 개별 설정할 수 있으며, 간단한 단축 속성을 통해 한번에 설정할 수도 있습니다.  margin-top : | | auto ;margin-right : | | auto ;margin-bottom : | | auto ;margin-left : | | a.. HTML5 & CSS3 2024. 6. 10.
HTML5 & CSS3 배워보자 (14화 : Border 관련 속성) 1. Border-styleborder-style은 CSS에서 HTML 요소의 테두리 모양을 지정하는 속성입니다. 이 속성을 사용하여 다양한 테두리 스타일을 적용할 수 있습니다. border-style은 다음과 같은 여러 값을 가질 수 있습니다.  border-style : none | hidden | dashed | dotted | double | groove | insert | outset | ridge | solid ; none : 테두리가 없습니다.solid : 실선 테두리입니다.dotted : 점선 테두리입니다.dashed : 대시(dash)선 테두리입니다.double : 이중 실선 테두리입니다.groove : 홈이 파인 것처럼 보이는 3D 테두리입니다.ridge : 돌출된 것처럼 보이는 3D .. HTML5 & CSS3 2024. 6. 3.
HTML5 & CSS3 배워보자 (13화 : 레이아웃을 위한 스타일) 1. 블록 레벨 요소와 인라인 레벨 요소HTML 요소는 블록 레벨 요소와 인라인 레벨 요소로 나뉩니다. 이들은 페이지 레이아웃과 콘텐츠 배치에 중요한 역할을 합니다.■ 블록 레벨 요소 (Block-level Elements)블록 레벨 요소는 항상 새로운 줄에서 시작하며, 부모 요소의 전체 너비를 차지합니다. 이러한 요소는 주로 문서의 구조를 정의하는 데 사용됩니다.항상 새로운 줄에서 시작합니다.전체 너비를 차지합니다.다른 블록 레벨 요소나 인라인 레벨 요소를 포함할 수 있습니다. , ,  등,  This is a box model example. 이 예제에서, .box 클래스는 다양한 박스 모델 속성을 사용하여 요소의 크기와 간격을 설정합니다. 이를 통해 박스 모델이 어떻게 작동하는지 시각적으로 확.. HTML5 & CSS3 2024. 6. 1.
HTML5 & CSS3 배워보자 (12화 : 색상 및 배경 표현) 웹 디자인에서 가장 먼저 떠오르는 요소 중 하나는 색상입니다. 색상은 시각적 요소 중에서도 자주 변경되는 속성입니다. 웹에서 색상을 적용하는 방법에는 네 가지 대표적인 방식이 있습니다. 각 방법을 자세히 살펴보겠습니다. Hex 코드 : 가장 일반적인 방법으로, 16진수 코드를 사용하여 색상을 지정합니다. 예를 들어, #FFFFFF는 흰색을 의미합니다. 이 방식은 6자리 또는 3자리로 축약된 코드를 사용하여 색상을 정의합니다. RGB와 RGBA : RGB는 Red, Green, Blue 세 가지 색상의 조합으로 색상을 정의합니다. 예를 들어, rgb(255, 0, 0)은 빨간색을 나타냅니다. RGBA는 여기에 투명도(알파 채널)를 추가한 방식으로, rgba(255, 0, 0, 0.5)는 반투명한 빨간색을 .. HTML5 & CSS3 2024. 5. 22.
HTML5 & CSS3 배워보자 (11화 : 목록 스타일) 웹 문서에서 목록과 링크를 결합한 형태는 자주 등장하며, 이는 특히 사이트 메뉴에 많이 사용됩니다. 이러한 메뉴는 사용자들이 웹사이트를 쉽게 탐색할 수 있도록 도와줍니다. 목록과 링크를 결합한 메뉴를 만들고 여기에 CSS를 적용하면, 웹사이트의 시각적 매력을 높이고 사용자 경험을 향상시킬 수 있습니다. 이번 절에서는 목록을 만드는 방법과 이를 스타일링하는 CSS 속성에 대해 알아보겠습니다.   1. list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기list-style-type 속성은 목록 항목의 마커(불릿) 스타일을 지정하는 데 사용됩니다. 이 속성은 주로 순서가 없는 목록(ul)과 순서가 있는 목록(ol)에 적용됩니다. 이 속성을 통해 목록의 항목이 어떤 모양으로 표시될지 설정할 .. HTML5 & CSS3 2024. 5. 19.
HTML5 & CSS3 배워보자 (10화 : 문단 스타일) 이번 10화에서는 문단 스타일에 대해 다뤄보겠습니다. 텍스트는 웹 문서에서 주로 문단 형태로 사용됩니다. 문단 스타일에서는 텍스트의 정렬, 들여쓰기, 줄 간격 등을 조절할 수 있습니다. 웹 문서에서 텍스트를 자주 다룬다면 이러한 문단 스타일을 익혀두는 것이 중요합니다. 이제 각각의 요소를 자세히 살펴보겠습니다.    1. Direction 속성 - 글자 쓰기 방향 지정하기direction 속성은 텍스트의 방향을 지정하는 데 사용됩니다. 이 속성은 주로 언어의 방향을 설정하거나 텍스트의 방향을 변경할 때 활용됩니다. 가장 일반적으로 사용되는 값은 다음과 같습니다ltr : 텍스트를 왼쪽에서 오른쪽으로 표시합니다. 이 값은 대부분의 서양 언어에 사용됩니다.rtl : 텍스트를 오른쪽에서 왼쪽으로 표시합니다. 이.. HTML5 & CSS3 2024. 5. 14.
HTML5 & CSS3 배워보자 (9화 : 텍스트 스타일) 9화에서는 텍스트 스타일에 대해 알아보겠습니다. 폰트와 텍스트 스타일은 비슷하지만 약간 다른 개념입니다. 폰트는 우리가 보는 글꼴을 가리키고, 텍스트 스타일은 글자와 단어들, 그리고 문단에서 사용되는 스타일을 말합니다.   텍스트 스타일에는 여러 가지가 있습니다. 예를 들면, 글자의 크기를 조절할 수 있고, 굵기를 바꿀 수도 있습니다. 또한, 글자를 기울일 수도 있고, 특정 부분을 색깔로 강조할 수도 있게됩니다.  이런 스타일들은 텍스트를 보다 명확하게 만들어주고, 더욱 읽기 쉽게 만들어 줍니다. 그래서 이번 9화에서는 특히 글자와 단어에 적용되는 스타일을 살펴보겠습니다. 이를 통해 텍스트가 보다 매력적으로 보이고, 사용자들이 내용을 더 쉽게 이해하고 읽을 수 있게 도와줄 수 있습니다.     1.Col.. HTML5 & CSS3 2024. 5. 10.
HTML5 & CSS3 배워보자 (8화 : 폰트 관련 스타일) CSS의 기본 개념을 알아본 후, 이제는 웹 문서에서 핵심적인 역할을 하는 텍스트를 다뤄보겠습니다. 텍스트는 웹 페이지를 읽고 이해하는 데 중요한 역할을 합니다. 사용자가 텍스트를 통해 정보를 습득하고 웹 페이지를 탐색합니다. 그렇기 때문에 텍스트의 스타일을 지정하는 것은 웹 문서의 전반적인 디자인과 사용자 경험을 크게 좌우하는 요소 중 하나입니다. 텍스트는 단순히 글자를 표시하는 것 이상의 역할을 합니다. 텍스트 스타일링은 사용자에게 정보를 전달하는데 있어서 매우 중요한 역할을 합니다. 이번  8화에서는 사용자가 웹 페이지의 내용을 쉽게 이해할 수 있도록 텍스트의 기초가 되는 폰트 스타일을 지정하는 방법을 살펴보겠습니다.    1.font-family 속성 - 폰트 지정font-family 속성은 웹 .. HTML5 & CSS3 2024. 5. 7.
HTML5 & CSS3 배워보자 (7화 : 캐스캐이딩 스타일 시트 우선순위) 스타일 시트는 보통 CSS라고 더 잘 알려져 있습니다. CSS와 스타일 시트는 비슷하지만 약간의 차이가 있습니다. CSS는 '스타일 시트'라는 용어에 '캐스캐이딩(Cascading)'이라는 용어가 추가된 것인데, 그래서 CSS에는 캐스캐이딩이라는 개념이 포함돼 있습니다.. 이 개념이 무엇을 의미하고 어떤 역할을 하는지 알아볼겠습니다.    1.캐스캐이딩(Cascading)의 의미캐스캐이딩은 CSS에서 스타일을 적용할 때 스타일 규칙들이 서로 다른 출처로부터 올 수 있고, 이 규칙들이 겹쳐서 적용될 때 어떻게 처리될지를 결정하는 방식입니다. 예를 들어, 동일한 요소에 대해 여러 스타일이 적용될 수 있는데, 이때 캐스캐이딩은 이러한 스타일들 중 어떤 것이 우선되는지를 정하는 규칙을 말합니다. 보통 가장 구체.. HTML5 & CSS3 2024. 5. 7.
HTML5 & CSS3 배워보자 (6화 : CSS 선택자) 이번 6화에서는 선택자(Selector)에 대해 알아보겠습니다. 선택자는 하나의 태그를 지정할 수 있을 뿐 아니라, 여러 요소를 묶어 별도의 선택자로 지정할 수도 있습니다. 이렇게 함으로써 스타일을 일일이 지정하는 대신에 별도의 그룹 요소에 대해 스타일을 쉽게 적용할 수 있습니다. 다양한 종류의 선택자가 있지만, 이번 6화에서는 주로 사용되는 선택자에 대해 우선적으로 알아보겠습니다.     전체 선택자 - 모든 요소에 스타일 적용 전체 선택자는 모든 요소에 스타일을 적용할 때 사용됩니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용하는 데 활용됩니다. 전체 선택자는 '*'(별표)를 사용하여 표현됩니다. 또한, 전체 선택자는 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 유용합니다. 예를 들어.. HTML5 & CSS3 2024. 5. 6.
HTML5 & CSS3 배워보자 (5화 : CSS 스타일 기초) 웹 문서의 기본적인 구조는 모두 완성되었지만, 여전히 심심하고 어설프게 느껴집니다. 요소들이 정리되지 않고 단순히 나열되어 있어서 보기에 좋지 않습니다. 이제 이 문서에 CSS라는 옷을 입혀 보겠습니다. HTML로 만들어둔 골격에 CSS를 적용하는 것이죠. 웹 디자인이나 웹 개발에서 CSS는 매우 중요한데, HTML보다 더 많은 역할을 하기도 합니다. 다음으로 CSS의 주요 속성들을 익혀 웹 디자인을 한 층 더 업그레이드해보세요. CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 핵심 개념입니다. HTML은 웹 문서의 뼈대를 만드는데 사용되며, 텍스트, 이미지, 표 등 다양한 요소를 웹 페이지에 배치합니다. 반면에 CSS는 이러한 요소들의 디자인과 스타일을 담당합니다. 텍스트.. HTML5 & CSS3 2024. 5. 4.
HTML5 & CSS3 배워보자 (4화 : Input, select) 오늘은 웹 페이지에서 자주 사용되는  태그에 대해 알아보려고 합니다. 웹 폼은 주로 두 가지 부분으로 구성되어 있는데, 하나는 사용자가 내용을 입력하는 부분이고, 다른 하나는 입력한 내용을 서버로 전송하는 버튼 부분입니다.  태그는 이 중에서 사용자가 내용을 입력하는 부분에서 주로 사용됩니다. 이 태그는 다양한 형태의 입력 필드를 생성하여 사용자로부터 정보를 수집하고, 웹 페이지에서 중요한 역할을 합니다. 주로 사용되는 몇 가지 타입과 자주 사용되는 속성 및 태그 외 폼 요소에 대해 공부해보겠습니다.  1.input 태그 태그는 HTML에서 사용자로부터 데이터를 입력 받는 데 사용되는 요소 중 하나입니다. 이 요소는 다양한 타입(type)의 입력 필드를 생성할 수 있어서 웹 폼(form)을 만들 때 .. HTML5 & CSS3 2024. 4. 30.
HTML5 & CSS3 배워보자 (3화 : Form) 오늘은 HTML에서 가장 흔히 사용되는 요소 중 하나인 폼(Form)에 대해 공부해보려고 합니다. 폼은 사용자가 웹사이트에서 정보를 입력하는 용도로 사용되며, 주로 로그인이나 회원가입과 같은 곳에서 볼 수 있습니다. 하지만 유의할 점은 각 브라우저가 폼 요소를 지원하는 방식이 조금씩 다를 수 있다는 것입니다. 따라서 표준이 확립되기 전까지는 각 요소를 하나씩 테스트하며 확인하는 습관을 가지는 것이 중요합니다. 이제 폼과 관련된 내용에 대해 좀 더 자세히 알아보도록 하겠습니다.    1.form 태그태그는 HTML에서 폼을 정의할 때 사용되는 요소입니다. 폼은 사용자로부터 정보를 입력 받는 데 사용되며, 로그인, 회원가입, 검색 등 다양한 상호 작용 기능을 구현할 때 필수적으로 활용됩니다. 태그는 폼 요.. HTML5 & CSS3 2024. 4. 29.
HTML5 & CSS3 배워보자 (2화 : Image, Link) HTML 태그 중에서 가장 사용빈도가 높은 태그중의 하나가 바로 이미지 관련 태그와 하이퍼링크 관련 태그일 것입니다. 지난 1화에 이어서 이미지 및 하이퍼링크 관련 태그를 알아보도록 하겠습니다. 이외에도 요즘 웹 사이트에서 자주 사용하고 있는 SVG 이미지에 대해서도 한번 알아보도록 하겠습니다. 1.이미지 관련웹 사이트를 작성할 때 이미지는 텍스트와 함께 사용되어 시각적인 효과를 높이는 데 중요한 역할을 합니다. 그러나 웹에서 사용할 수 있는 이미지의 형식은 제한되어 있습니다. 보통 GIF, JPG/JPEG, PNG 형식의 이미지가 주로 사용됩니다.GIF(Graphics Interchange Format): 간단한 애니메이션 및 작은 크기의 이미지에 적합합니다. 투명한 배경을 지원하며, 간단한 .. HTML5 & CSS3 2024. 4. 18.
HTML5 & CSS3 배워보자 (1화 : HTML) 많은 사람들이 웹 사이트를 만들거나 모바일 앱을 개발하기 위해 HTML이라는 용어를 자주 듣게 됩니다. 웹 브라우저 화면에 정보를 표시하기 위한 가장 기본적인 도구로서 HTML과 CSS가 필요하기 때문입니다. 특히 최근에는 모바일 기기가 중심이 되면서 웹 표준 기술인 HTML5가 더욱 중요해지고 있습니다. 이 과정에서는 HTML을 처음 접하는 사람들을 대상으로, 매우 기초적이고 기본적인 HTML의 개념부터 시작하여 기본 문서 구조를 이해하고, 필요한 소프트웨어를 설치하는 방법까지 알려드리겠습니다.  1.HTML의 이해컴퓨터에서 사용하는 각 파일은 고유의 형식을 갖고 있습니다. 엑셀 프로그램으로 작성한 문서는 xlsx 확장자를 가지며, 한글로 작성한 문서는 hwp 확장자를 가지게 됩니다. 웹에서.. HTML5 & CSS3 2024. 4. 12.

티스토리툴바