본문 바로가기

CSS312

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.

티스토리툴바