본문 바로가기
  • 오늘도 한걸음. 수고많았어요.^^
  • 조금씩 꾸준히 오래 가자.ㅎ

전체 글485

span, div 2 특정영역와 넓은 영역에 스타일을 주는 태그 span, div 태그 지난 시간에 span, div에 대해 다뤘는데요 오늘은 span, div 태그 2탄입니다. [html/css기초] span, div 글꼴, 색깔, 너비나 높이 등 스타일을 지정할 때, 두 가지 방식으로 지정할 수 있는데요. 1. 문자 일부분만을 선택해서 지정하거나 (inline) 2. 넓은 범위를 묶어서 지정하거나 (block) [Inline Element] 1번은 줄 속에 끼워 넣는 요소(inline element) 라 하며,예 :, , , 태그 등 [사용 예] div.rtf 지구별 홈페이지에 오신 것을 환영합니다지구별 홈페이지에 오신 것을 환영합니다지구별 홈페이지에 오신 것을 환영합니다 사용 예에서 본 것처럼 특장 문자를 선택해서 지정.. 2017. 3. 23.
span, div 1 [html/css기초] span, div 사용법 어제는 id, class 선택자에 대해 알아 보았습니다 class, id 선택자 참조 id는 스타일을 지정할 때 사용하는 고유 이름이고 class는 스타일을 묶어서 지정할 때 사용하는 이름이라고 했습니다. 이 id, class 와 함께 자주 사용되는 것이 와 입니다. 과 역시 그룹으로 묶어서 지정하는 것과 관계가 있습니다. 는 문자열을 원하는 부분만 선택해서 시각적 효과를 줄 수 있습니다. 사용 예. 내용 내용 id를 사용하게 되면 각각 고유의 이름을 부여해야 하기 때문이전체를 묶어 스타일을 지정하려면 class를 사용하는 것이 편리합니다. ㉠확장자 .css로 저장 (예:test.css) span.welcome { color:red;} ㉡확장자 .htm으로.. 2017. 3. 23.
class, id 선택자 [HTML, CSS 기초] class, id 선택자 사실 지난 주부터, CSS 카테고리에 글을 올려야겠다고 맘을 먹긴 했는데 글 쓰기가 정말로 쉽지 않네요. 머릿속으로는 대충 알고 있어도, 이론적으로 풀어내려니 또 빠짐 없이 다루어야 한다는 부담감 때문에 글 하나 만들어내기가 어렵게 느껴지네요^^ 이러다간 점점 글 쓸 자신이 없어질까 봐 이제부터 그냥 맘 편하게 쓰려고 해요... 지난 시간에 HTML과 CSS 차이에 대해 알아 보고 작성법도 간단히 알아 봤습니다. CSS란? (HTML과 CSS의 차이, CSS 작성법) HTML 작성은 이렇게 하고 내용 예: 내용 CSS 작성법은 이렇게 선택자 {속성:속성값; 속성: 속성값;}예: p {text-aglign:center; color: red;} [ID와 C.. 2017. 3. 23.
HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이) HTML 기초 부분 (HTML 뜻, 작성프로그램, XHTML, XML, HTML5, DHTML 차이)에 대해 알아보겠습니다. 티스토리나 블로그 등 웹 사이트를 만들려면 제일 처음 만나게 되는 단어가 HTML인데요. HTML이 정확히 무슨 뜻일까요? HTML의 뜻 HTML은 Hyper Text Mark-up Language의 약자입니다. Hyper : linear(선형)의 반대 말로 linear는 프로그램을 순차적으로 실행했다면 hyper는 링크를 통해 실행 순서가 자요로움. Text : 문자 Mark-up : 문서의 형식을 지정하는 명령문 (markup: instructions added to documents that tell a computer how to print or organize the in.. 2017. 3. 23.
CSS란? (HTML과 CSS의 차이, CSS 작성법) CSS란? (HTML과 CSS의 차이) CSS는 Cascading Style Sheets 약자로, HTML, XHTML, XML 같은 문서의 스타일를 꾸밀 때 사용하는 스타일 시트 언어입니다. HTML로 문서의 뼈대를 만들면 CSS는 이 문서의 화장을 맡고 있는 셈인데요. 글꼴이나, 배경색, 너비와 높이, 위치 등을 지정하거나, 웹 브라우저, 스크린 크기, 장치에 따라서 화면을 다르게 표시될 수 있도록 지정할 수도 있습니다. CSS는 1996는 12월 W3C(웹 문서 표준을 만드는 기관)가 도입 했는데 그 전엔 HTML언어 하나로 문서의 뼈대도 만들고, 꾸밈도 같이 했습니다. 그러다 보니 HTML 문서를 수정할 때 모든 문서를 하나씩 수정해야 하는 번거로움이 있었습니다.. CSS는 문서의 내용(conte.. 2017. 3. 23.
margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) [html/css] margin 속성 자세히 알아 보기(margin-top, margin-left, margin-bottom, margin-left 설정 방법) 어제는 border 속성에 대해 자세히 알아보았는데요... border와 함께 자주 사용되는 속성이 border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) padding과 margin 입니다. padding: 본문 내용과 border 사이의 여백border : 선 (선 굵기를 다양하게 지정할 수 있으며, 선을 그리지 않을 수도 있음)margin : border와 바깥과의 여백. P-B-M 이라고 외워두시면 좋습니다. 어제 배운 border(선)와 바깥과의 여백을 margin이라고 하는.. 2017. 3. 23.
padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) [html/css] padding 속성 사용법(padding-right, padding-left, padding-top, padding-bottom) 지난 시간에는 margin 속성을 이용하여 레이아웃에 여백을 넣었습니다. margin 속성 자세히 알아 보기 이번엔 padding 속성을 사용하여 레이아웃에 여백을 넣어 보겠습니다. padding은 아래 그림에서 content(내용)와 border(선)사이의 공간을 말 합니다. 우선 아래 그림과 같은 레이아웃을 그려보았습니다. 지난 번 레이아웃에서 C D와 B 사이에 margin을 넣었다면, 이번엔 선 A를 하나 더 그려서, A와 B 사이에 padding을 넣는 방법입니다. 그림에 너비까지 계산해 보았는데요, 너비 값 계산 식은 다음과 같습니다 width+.. 2017. 3. 23.
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 표를 만드는 table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 오늘은 태그에 대해 알아 보겠습니다. 은 표를 만드는 태그인데요 아래 그림처럼 작은 표를 만드는 데 쓰일 수 있고, 밑에 처럼, 홈페이지의 전체 구성(layout)을 만드는 데도 사용될 수 있어요. 하지만 원래 table 태그는, 위 그림처럼 데이터를 담고 있는 표를 만들기 위한 목적이라고 합니다~ 그래서 홈페이지 전체 구성이나 배치를 위해선, 태그를 사용하는 것이 좋으며 앞으로 다룰 css에서 더 자세히 알아보도록 하겠습니다. CSS란? (HTML과 CSS의 차이, CSS 작성법) html 기초 태그에 대해서도 썼듯, 역시 과 쌍을 이루어 사용합니다. HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에.. 2017. 3. 23.
text-align 속성으로 정렬하기 (left, right, center, justify) [html/css] text-align 속성으로 정렬하기 (left, right, center, justify) html에서는 문서를 수평으로 정렬할 때 align 속성을 썼는데요 align은 html5에서 지원하지 않는 속성으로 되도록 css로 정렬하는 것을 권장한다고 합니다... css에서는 문서를 수평으로 정렬할 때 text-align 속성을 씁니다. text-align text-align은 block 요소 안에 있는 inline 요소를 정렬합니다. inline 과 block 요소 차이는 다음을 참고더보기 1. block 요소에만 text-align 속성을 적용할 수 있다2. 정렬되는 것은 block 요소 안에 있는 inline 요소만 가능함.3. 2번에서 inline 요소란 text뿐 아니라 이미.. 2017. 3. 23.

티스토리툴바