본문 바로가기
반응형

교육이야기

웹개발 웹언어 CSS 웹꾸미기 디자인 입히기 텍스트편 #2 텍스트 스타일 속성 정리 1. 텍스트에 색입히기 텍스트에 색을 입히는 방법은 앞에서도 설명한 바가 있습니다만 정리를 위해 한번 더 설명드리도록 하겠습니다. 아래와 같이 스타일 적용부분에 색을 입력 후 마우스를 해당 색상에 두고기다리시면 색상을 직접 골라 적용할 수 있으니 참고하시면 되겠습니다. 2. 텍스트 정렬하기 텍스트를 정렬하는 방법으로 태그 안에 .입력 내용 { text-align을 입력하고 정렬할 내용으로 속성을 입력합니다. } 참고로 * { 속성값 } 으로 입력하면 전체 적용입니다. body 부분에서 개별로 입력할 경우 class="입력 내용" 으로 적용하여 개별 출력 가능합니다. 예시) 왼쪽정렬 속성별 해석내용입니다. center 가운데 정렬 end 줄끝 정렬 justify 양쪽 정렬 left.. 더보기
웹개발 웹언어 CSS 웹꾸미기 디자인 입히기 텍스트편 HTML 작성 문서에 글꼴, 크기, 굵기 적용하기 작성문서에 font- 를 이용하여 다양한 출력물을 얻을 수 있습니다. 위와같이 글꼴을 적용해 보기 위해 font 를 입력하면 해당 하는 다양한 속성들을 만나볼 수 있습니다. 대표적인 것들로 적용해 본 뒤 어떻게 출력되는지를 확인해 보도록 하겠습니다. 1. 글꼴 적용 font-family: 2. 크기 적용 font-size: 3. 굵기 적용 font-wight: 위 의 3가지 방법을 이용하여 선택 후 출력하게 되면 아래와 같이 텍스트에 글꼴이 적용된 모습을 확인할 수 있습니다. TIP. CSS에서 크기를 적용할 수 있는 방법은 다양합니다. 하지만, PC뿐만 아니라 모바일이나 태블릿 등의 사용자들의 기기가 다양해졌기 때문에 이를 모두 고려할 수 있는 em, .. 더보기
웹개발 웹언어 CSS 웹꾸미기 스타일 디자인 다양한 방법으로 비주얼 스튜디오에서 HTML양식으로 문서를 작성했다면 이제 HTML 양식에 CSS 를 더해 웹문서의 스타일을 변경하고 디자인을 입혀 다양한 시각으로 사용자를 안내하는 웹페이지의 역할을 할 수 있도록 해보겠습니다. 먼저 구글의 Web Developer 확장 기능을 설치하여 봅시다. 이 기능을 활용하면 디자인과 스타일을 입히기 전의 HTML양식과 Google웹페이지에서 기본으로 제공하는 스타일의 원초적인 언어만으로 구성된 페이지의 모습을 확인할 수가 있습니다. 구글에서 Web Developer 확장기능을 검색하시고 원래 하단에 Chrome 추가라고 나옵니다. 저는 설치를 완료했기에 삭제로 나오니 추가 버튼을 누르시면 되겠습니다. 추가 버튼을 누르면 아래와 같이 원형 톱니바퀴 모양이 확인이 되.. 더보기
웹개발의 기본언어 HTML 양식 폼, input 태그 및 속성 2편 input 태그에서 사용할 수 있는 다양한 속성을 하나하나 소개해 드리도록 하겠습니다. 위 태그와 속성값을 이용하여 간단하게 ID와 Password를 코딩하여 출력해보면 아래와 같습니다. 위와 같은 방법으로 lebel 태그와 input 태그를 이용하여 만들 수 있는 다양한 출력물들이 존재합니다. 이를 만들 수 있는 속성값을 소개해 드리도록 하겠습니다. 저번 시간에 label 태그와 input 태그를 나누어 쓸 수 있는 방법을 소개하였습니다. 아래와 같이 input type에 숨어있는 속성들이 있습니다. 이외에 button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month 를 속성값으로 입력할 수 있습니다... 더보기
웹개발의 기본언어 HTML 다양한 양식 폼, Input 태그 및 속성 웹에서 다양한 정보를 제작자가 만들고 이를 웹에 방문한 사용자들이 정보를 해당 항목에 입력하여 사용자 정보를 기반으로 로그인, 상품주문, 설문지작성 등 다양한 곳에서 사용할 수 있도록 프로그래밍하여 처리하는 일명 폼기반의 웹 문서를 만들기 위해 사용하는 태그에 대하여 알아 보도록 하겠습니다. 일단 기본으로 적용되는 값은 입니다. 일단 비주얼스튜디오에서 해당값을 입력하게 되면 사용 가능한 속성값이 나열되는데 이를 하나씩 살펴 보도록 하겠습니다. 보시는 것과 같이 속성에 method를 입력했을 경우에 "dialog", "get", "post" 3가지 속성을 사용할 수 있도록 보여지는데요 각각 하나씩 설명드리겠습니다. 으로 입력하였을 경우에는 폼요소를 제출하게 될경우 표시된 상자 입력폼을 닫아 보이지 않도록 .. 더보기
웹개발의 기본 언어 HTML 멀티미디어 오디오 비디오 파일 태그 1. 오디오 파일 오디오 파일을 삽입하기 위해서 이용하는 태그는 입니다. 이미지 태그를 사용했을 때와 마찬가지로 src를 이용하여 경로를 알려주면 간단히 삽입이 가능합니다. 우선 실습을 위해 오디오 파일을 다운 받아주시거나 핸드폰에 녹음을 통한 오디오 파일을 받아주시면 실습 준비가 완료 됩니다. HTML 파일을 저장한 곳에 함께 두시면 번거롭게 모든 경로를 쓰지 않고 오디오 파일 이름만 경로에 기입하면 되기에 HTML파일과 같은 저장 위치에 오디오 파일을 두고 진행해 보도록 하겠습니다. controls를 사용하는 이유는 사용자가 재생버튼을 눌러야만 오디오를 재생할 수 있도록 하기 위함입니다. 만약 자동으로 오디오를 실행하려면 autoplay를 입력하면 됩니다. 하지만 현재 사용할 수 있는 대부분의 웹브라.. 더보기
웹개발의 기본 언어 HTML 구조 구성을 위한 시맨틱 텍스트 이미지 태그 시맨틱 태그는 문서 내용에 영향을 주지는 않치만 웹의 문서구조를 파악할 수 있도록 구분하고 파악하는 역할을 하는 태그라 보시면 됩니다. 이 시맨틱 태그의 종류와 의미에 대해 설명 드리도록 하겠습니다. 위에서도 언급한바 있는 시맨틱 태그는 사용시 사용자가 구성된 태그 이름으로 쉽게 구분된 내용을 확인할 수 있을 뿐만 아니라 구조가 정확히 나눠지기 때문에 다양한 환경(PC, 모바일 등)에서 노출되는 웹문서를 최적화하기에 용이하다는 점이 있습니다. 사용되는 태그와 의미에 대해 정리해보도록 하겠습니다. 헤더 영역입니다. 주로 검색창이나 사이트 메뉴가 들어가는 부분으로 이해하시면 됩니다. 다른위치로의 연결을 위한 태그입니다. 흔히 표현하는 링크입니다. 웹문서에서 한번만 사용 가능하며 메인 콘텐츠가 들어갈 예정입니.. 더보기
웹개발의 기본 언어 HTML 기본구조와 태그의 이해편 HTML 문서의 기본 구조의 이해 HTML의 문서는 그동안 이 글을 읽으시는 분들께서 사용하셨을지도 모르는 한글이나, 엑셀, 파워포인트와 같지 않고 HTML만의 형식을 이용하여 작성할 수 있습니다. 기본이 되는 뼈대는 html이라는 프레임 안에 head와 body이 자리하고 있는 것입니다. 잠시 HTML만의 영역으로 구성해 보자면 아래와 같습니다. = 과 맨 마지막의 이 보이실거에요. 웹문서의 시작과 끝을 나타냅니다. = 실제로 웹 브라우저 면에 나타나는 내용입니다. 태그에 대한 이해 웹문서 개발에 기본이 되는 다양한 태그들 중에 위에서 언급하였던 언어들에 대해 이해를 돕고자 풀어 설명해 드리도록 하겠습니다. 일단 문서의 유형을 지정하는 이렇게 사용하게되는 태그는 현재 이문서가 HTML5 문서입니다. 라.. 더보기
반응형

티스토리툴바