'웹 언어 배우기' 카테고리의 글 목록 (4 Page)

웹 언어 배우기 (44)

html h1 tag "제목 태그"

웹 언어 배우기/HTML 다한(dahan) 2019. 1. 16. 07:00

html에서 글자를 크게 하거나 꾸며주는 태그, 속성은 대표적으로 font-size, color 등이 있습니다. 그 중 이것을 활용하면 검색엔진에 효과적인 태그입니다. 바로 h 태그입니다. h 태그는 부터 까지로 숫자가 클수록 글자 크기가 작아지고 자동으로 줄바꿈이 됩니다. 그리고 이 태그는 html5 이후부터 속성이 없습니다. ※ html5 이전 h 태그는 align 속성이 있었습니다. 이 속성은 글자를 정렬할 수 있습니다. 없어진 계기는 CSS에 똑같은 의미가 있는 text-align이 있어 없어진 것이라고 생각됩니다. h tag별 용도 h tag는 총 6가지가 있습니다. 가장 크게 보여야 하고 돋보이게 해야 하는 제목은 태그를 사용합니다. 따라서 가장 중요한 태그라고 할 수 있습니다. 그러므로 태그..

html 폰트 크기에 비례하는 rem 단위 "font-size 속성"

웹 언어 배우기/CSS 다한(dahan) 2019. 1. 15. 07:00

웹 표준이라는 말을 들어보셨나요? 이 용어는 W3C가 지정한 표준안을 지켜 웹사이트를 제작하는 것을 말합니다.이렇게 작성하면 어떤 운영체제나 웹 브라우저 상에서도 비교적 같은 디자인과 기능을 구현하는 데에 목적이라고 할 수 있습니다. 웹 표준이란? 반응형 웹을 만들 때 중요한 반응형 폰트 크기에 대해 알아보겠습니다. px x em x rem 단위 px, em, rem은 상대 단위와 절대 단위로 나뉠 수 있습니다. px와 em은 오래전부터 있었지만, rem은 최근에 만들어진 단위입니다. px : 크기가 고정된 단위em, rem : 사용자가 브라우저 설정에 따라서 폰트의 크기가 달라지는 단위 px rem 즉, 사용자가 브라우저의 폰트 크기를 키웠을 때 px는 바뀌지 않고 rem은 바뀝니다.오늘날에는 일반적으..

javascript "자바스크립트는 동적으로 변경해주는 언어"

웹 언어 배우기/JavaScript 다한(dahan) 2019. 1. 14. 07:00

HTML과 CSS는 정적인 언어입니다. 코드를 작성하면 그 코드에 대해서만 화면에 보인다는 뜻입니다. 하지만 javascript는 HTML과 CSS로 만들어진 웹페이지를 동적으로 변경해주는 언어입니다. 즉, 기능을 만드는 언어라고 할 수 있습니다. 경고창을 띄운다거나 더 보기 기능을 만들 수도 있고 움직이는 이미지를 만들 수 있습니다. 웹페이지를 만들 때 필요한 언어는 크게 3가지입니다. HTML로 뼈대를 만들고 CSS로 디자인적인 요소를 관리하고 javascript로 웹페이지의 기능 즉, 동작을 관리합니다. 라이브러리와 프레임워크 자바스크립트는 웹 개발은 물론 다른 곳에서도 사용할 수 있습니다. 그래서 응용할 수 있는 범위가 무궁무진합니다. 그래서 자바스크립트는 라이브러리나 프레임워크가 개발자들 사이에..

웹사이트에서 게시판 구조 만드는 방법 "<table> 태그"

웹 언어 배우기/HTML 다한(dahan) 2019. 1. 11. 07:00

웹사이트에서 게시판 구조 만드는 방법" 태그" 웹사이트를 만들게 되면 여러가지 디자인을 할 때 레이아웃을 잡아야 합니다.과거에는 웹페이지의 전체를 표로 잡아 개발했지만 W3C에서 테이블로 레이아웃 개발을 하지말자라고 해서 지금은 보다 간편한(?) 방법으로 레이아웃을 잡고 있습니다. 웹사이트에서는 주로 게시판 구조를 만들 때 사용됩니다. 기본 구조 : 표를 만들기 위해 전체적인 구조를 구성하는 태그 : table row를 뜻하며 한 줄을 의미하는 태그 : table data를 뜻하며 하나하나의 데이터를 의미하는 태그 의미론적 구조 : 텍스트 진하게 표시 : 테이블의 제목부분으로 가장 맨 위로 지정되는 태그 : 테이블의 본문 태그 : 테이블의 끝을 의미하며 가장 아래로 지정되는 태그 수직, 수평 병합 이 때..

css float 속성 이해하기

웹 언어 배우기/CSS 다한(dahan) 2018. 12. 31. 07:00

float 속성은 css에서 정렬하기 위해 사용되는 속성입니다. 이뿐만 아니라, 다단의 레이아웃을 구성할 때, 이미지 슬라이더 등에서도 활용할 수 있습니다. 위 사진과 같이 이미지 옆에 글을 쓸 때에서도 사용할 수 있습니다. 이와 비슷하게 display 속성에도 이같이 응용할 수 있는데 이 둘의 차이점은 여백입니다. float 속성 사용법 float : none | left | right none : 기본 속성으로 적용되지 않는다는 의미의 속성값left : 적용된 태그에 대해서 왼쪽 정렬 하는 속성값right : 적용된 태그에 대해서 오른쪽 정렬 하는 속성값 top menu aside footer

다양한 웹 언어에서 사용되는 <form> 태그

웹 언어 배우기/HTML 다한(dahan) 2018. 12. 13. 07:00

제목처럼 다양한 웹 언어(jsp, spring 등)에서 사용되는 태그에 대해 알아보겠습니다. 태그는 웹 상에서 많이 사용되는데 사용자에게 무엇인가 입력하여 값을 전달할 때 사용됩니다. 예를 들어보겠습니다.대부분의 홈페이지는 로그인, 회원가입 메뉴가 있습니다.로그인의 경우 아이디, 비밀번호를 적는 칸이 있죠. 로그인하려면 어떻게 해야 하나요? 바로 그 칸에 아이디와 비밀번호를 적고 로인 버튼을 누르죠? 그리고 아이디와 비밀번호가 틀리면 경고창이 나오면서 다시 입력하라는 메세지가 나올 것입니다. 혹은, 아이디와 비밀번호가 맞다면 로그인이 된 상태의 메인화면이 나올것입니다.이것이 바로 태그의 역할입니다. 태그 사용법 태그는 사용자가 입력한 정보를 서버로 전송할 때 사용하는 태그입니다. 사용자가 아이디와 비밀번..

html5 시맨틱 태그 종류

웹 언어 배우기/HTML 다한(dahan) 2018. 11. 25. 09:00

html5 버전에서는 시맨틱 태그(Semantic Tag) 즉, 의미론적인 태그를 지원합니다. 이것은 있으나 없으나 문서의 모습이나 형태가 변하지 않습니다. 하지만, 유지보수하거나 다른 사람이 이 코드를 봤을 때 한눈에 어디서부터 어디까지가 이 영역안에 있는 태그인지 확인할 수 있습니다. 여기서 영역안에 있는 태그의 이름이 시맨틱 태그의 역할입니다. 시맨틱 태그 시맨틱 태그는 보통 레이아웃을 설정할 때 사용합니다. 위 사진과 같이 html4까지는 는 레이아웃을 설정할 때 뿐만 아니라 그 외에 class, id 값을 설정할 때 사용됩니다. 그러면 코드에 태그가 업청 많아지겠죠? 그래서 html5 부터는 보다 편리하고 가독성도 높이는 시맨틱 태그가 탄생하게 되었습니다. 시맨틱 태그의 종류 : 화면 상단에 위..

css 박스 모델 구조 이해하기

웹 언어 배우기/CSS 다한(dahan) 2018. 11. 17. 09:00

css 박스 모델은 홈페이지에서 중요한 요소 중 하나로 뽑히고 있습니다. 구조를 이해한다면 쉽게 사용할 수 있습니다. 좀 더 자세히 어떤 점에서 중요한지 하나씩 알아보겠습니다. 웹 브라우저 크롬으로 알아보는 박스 모델 위 사진은 크롬에서 지원해주는 박스 모델입니다. 파란색으로 되어 있는 곳이 html 부분(content)입니다. border 영역을 기준으로 안쪽에 위치하는 영역을 padding, 바깥영역을 margin으로 구분하고 있습니다. 좀 더 자세히 알아볼까요? 테두리 안쪽 영역, padding 위 사진은 border 속성만 넣은 예제입니다. 여기에서 테두리 안에 있는 영역을 어떻게 하면 움직일 수 있을까요? 바로 padding에 값을 주면 됩니다. css 테두리 효과를 주는 border 속성 한가..

1
2
3
4
5
6

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바