민혁이의 IT스토리

오늘 배워볼 내용은 웹 디자인에서 테두리와 그림자의 역할에 대해서 알아보는 시간입니다. 테두리와 그림자는 시각적 요소를 강조하고, 페이지의 요소들이 서로 구분되도록 돕는 중요한 역할을 합니다. 그럼 두개의 속성을 배우러 가볼까요?   목차CSS 테두리 효과(boder)CSS 그림자 효과(shadow) css 테두리 효과테두리 효과는 웹 요소의 경계를 정의하는 데 사용됩니다. CSS에서 border 속성을 사용하면 간단하게 요소의 테두리를 설정할 수 있습니다. 테두리를 사용하기 위해서는 기본적으로 태두리의 두께, 스타일, 색상을 정의해줘야 합니다. CSS에서는 이 3가지 속성을 나눠서 정의 할 수도 있고, 한번에 묶어서 사용할 수도 있습니다. 우리는 배우는 입장이니 두개 다 아는 것이 좋겠죠??  방법1 ..

목차텍스트 색상 설정 방법배경 설정 방법 텍스트 색상 설정 방법웹페이지에서 텍스트의 색상을 설정 할 수 있는 방법은 여러가지가 있습니다. 대표적으로 많이 쓰는 방법으로는색상 이름, HEX 코드 , RGB 값 등이 있습니다. 우선 천천히 하나씩 알아보겠습니다! 색상 이름  : 방법은 간단하고 직관적이지만, 사용할 수 있는 색상의 수가 제한적입니다.         장점 : 코드가 간결하고 이해하기 쉽습니다.         단점 : 색상 이름의 선택지가 제한적이고, 명확한 색상 선택이 어려울 수 있습니다.  p { color: red; /* 텍스트 색상을 빨간색으로 설정 */} HEX 코드 :  HEX 코드는 16진수로 색상을 표현하는 방법입니다. # 기호 뒤에 6자리의 숫자와 알파벳을 사용합니다.     ..

웹페이지에서 중요하다고 생각되는 부분은 무엇인가요?저는 글꼴과 텍스트의 알맞은 크기 등이 중요하다고 생각됩니다. 그래서 오늘은 웹페이지에서 텍스트를 자유롭게 스타일링 할 수 있는 방법을 배워보도록 하겠습니다!😊  목차글꼴 기본 이해글꼴 스타일링 기초웹 폰트 사용하기  글꼴 기본 이해웹에서 글꼴을 사용할 때 가장 기본적으로 알아야 할 개념입니다. 글꼴이란 웹페이지에서 텍스트를 표시하는 방식으로, 글자의 모양과 스타일을 정의합니다. 웹 폰트란 무엇인가: 웹 폰트는 웹페이지에서 사용하는 폰트로, 사용자가 해당 폰트를 로컬에 설치하지 않아도 서버에서 불러와 사용할 수 있습니다.     글꼴 스타일링 기초CSS에서는 기본적으로 텍스트의 크기, 두께, 종류, 줄간격 등을 제어할 수 있습니다. 그럼 이것들을 어떻게..

전 글에서는 CSS를 사용해야 하는 이유, 사용방법 그리고 속성과값을 간단하게 배워보았습니다. 이제부터는 비슷한 속성들끼리 하나의 글에 묶어서 진행하려고 합니다. 오늘은 태그들의 너비,높이, 여백등을 설정할 수 있는 속성과 앞으로 나올 값의 단위를 미리 알아보는 시간입니다.   목차너비와 높이여백공간값의 단위 이 그림을 참고하면 오늘 나오는 내용에 이해를 도울 수 있습니다.  너비와 높이너비와 높이는 요소의 크기를 설정하는 중요한 속성입니다. 이 두 속성을 사용하면 웹 페이지에서 요소들이 차지하는 공간을 정확하게 제어할 수 있습니다.  속성명 Width : 요소의 가로 길이를 설정합니다.(너비)더보기width 사용방법  =  width : 크기;Height : 요소의 세로 길이를 설정합니다.(높이) 더보..

우리는 전 시간까지 웹페이지의 만들때 필요한 HTML을 배웠습니다. HTML이 웹페이지에 뼈대를 만드는 역할을 한다고 했을 때 지금부터 우리가 공부할 CSS( Cascading Style Sheets)는 우리의 웹페이지를 예쁘게 꾸며주는 역할을 하는 친구입니다. 그럼 CSS 무엇인지 만나러 가볼까요?  목차CSS란 CSS 기본 문법 속성과 값   CSS란  CSS는 웹 페이지의 스타일을 정의하는 언어입니다. HTML로 구조를 만든 후, CSS를 사용하여 텍스트 색상, 글꼴, 배치, 크기 등 웹 페이지의 시각적인 요소를 조정합니다. 사용 이유 : HTML만으로 웹페이지를 제작해야 할 경우, HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야 하기 때문에 많은 시간이 걸리고 완성한 후에도 스타일의 변경..

벌써 [혼자 공부해서 개발까지] - HTML 파트에 마지막을 달려가고 있는데요. 오늘은 웹페이지를 만들기 위해서 가장 기본적이면서 중요한 웹페이지 구조를 잡는 방법과 이때 필요한 구조태그에 대해서 알아보려고 합니다.그럼 바로 시작 할까요?    목차구조태그웹페이지의 구조 Layout  구조태그란?구조태그란, HTML 문서에서 페이지의 구조나 섹션을 정의하는 역할을 하는 태그들입니다. 이 태그들은 문서의 레이아웃을 정의하고, 내용의 의미를 명확하게 전달할 수 있도록 도와줍니다. 구조태그도 시맨틱 구조태그와 비시맨틱 구조태그로 나눌 수 있는데요. 비시맨틱 주고태그는 , 등으로 part1에서 공부했던 내용이기 때문에 오늘은 시맨틱 구조태그를 집중적으로 다뤄보겠습니다. 시맨틱 태그콘텐츠의 의미를 명확하게 전달하..

와우!!  파트0부터 시작해서 벌써 4번째 글을 쓰게 되었네요 ㅎㅎ  오늘은 어떤 재밌고 중요한 태그들을 소개하게 될지 기대가 됩니다😊 오늘 배울 태그들은 HTML을 실전에서 사용할 때 꼭 알아야 할 태그들입니다. 그럼 본격적으로 시작해볼까요?   목차Input태그Input의 종류button태그    3-1  Input태그란? 웹사이트를 이용하다 보면 우리가 원하는 결과를 얻기 위해서 선택과 입력 또는 클릭하는 버튼의 페이지를 쉽게 볼 수 있습니다. input 태그는 웹페이지에 보이는 모든 입력창을 담당하고 있다고 봐도 무방합니다. 정말 엄청나죠? 지금 부터 input라는 태그를 알아보러 가보겠습니다^^ : HTML에서 사용자로부터 데이터를 입력받는 데 사용되는 매우 중요한 요소입니다. 또한 열고 닫는..