반응형 반응형 웹 공부/3. CSS329 CSS3 - CSS 스타일 - float 속성 설정 (29) CSS3 - CSS 스타일 - float 속성 설정 (29) 오늘은 CSS3의 스물아홉번째 내용으로는 float 속성 설정에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. ------------------------------------------------------------------------------ css 스타일 - float 속성 설정이란? 먼저 float속성이란 '부유하다', '떠있다.' 라는 의미를 가지고 있으며태그(요소)의 위치를 잡을때 아주 .. 2017. 8. 17. CSS3 - CSS 스타일 - position(포지션)속성의 고정 위치 설정 (fixed positioning) (28) CSS3 - CSS 스타일 - position(포지션)속성의 고정 위치 설정 (fixed positioning) (28) 오늘은 CSS3의 스물여덟번째 내용으로는 position(포지션)속성의 고정 위치 설정 (fixed positioning)에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - position(포지션)속성의 고정 위치 설정 (fixed positioning)이란? 먼저 position(포지션)속성의 고정 위치 설정 (fixed po.. 2017. 8. 12. CSS3 - CSS 스타일 - position(포지션)속성의 절대 위치 설정 (absolute positioning) (27) CSS3 - CSS 스타일 - position(포지션)속성의 절대 위치 설정 (absolute positioning) (27) 오늘은 CSS3의 스물 일곱번째 내용으로는 position(포지션)속성의 절대 위치 설정 (absolute positioning)에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - position(포지션)속성의 절대 위치 설정 (absolute positioning))이란? 먼저 position(포지션)속성의 절대 위치 설.. 2017. 8. 8. CSS3 - CSS 스타일 - position(포지션)속성의 상대 위치 설정 (relative positioning) (26) CSS3 - CSS 스타일 - position(포지션)속성의 상대 위치 설정 (relative positioning) (26) 오늘은 CSS3의 스물 여섯번째 내용으로는 position(포지션)속성의 상대 위치 설정 (relative positioning)에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - position(포지션)속성의 상대 위치 설정 (relative positioning)이란? 먼저 position(포지션)속성의 상대 위치 설정.. 2017. 7. 26. CSS3 - CSS 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning) (25) CSS3 - CSS 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning) (25) 오늘은 CSS3의 스물 다섯번째 내용으로는 position(포지션)속성의 정적 위치 설정 (static positioning)에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning)이란? 먼저 position(포지션)속성의 정적 위치 설정 (stat.. 2017. 7. 25. CSS3 - CSS 스타일 - 태그(요소) 위치 지정하기 (24) CSS3 - CSS 스타일 - 태그(요소) 위치 지정하기 (24) 오늘은 CSS3의 스물 네번째 내용으로 태그(요소) 위치 지정하기에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 태그(요소) 위치 지정하기란? 먼저 css에서 태그(요소) 위치 지정하기란 말 그대로 태그의 위치를 스타일로 이동시키거나 정의 하는 내용으로 속성으로는 top(위), bottom(아래), left(왼쪽), right(오른쪽) 속성으로 사용이 되며사용하는 방법은 아래와 .. 2017. 7. 24. CSS3 - CSS 스타일 - display 속성 변경 (23) CSS3 - CSS 스타일 - display 속성 변경 (23) 오늘은 CSS3의 스물 세번째 내용으로 display 속성에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - display 속성이란? 먼저 css에서 display 속성이란 html 태그 (요소)를 작성 할때 기본적으로 블록태그, 인라인태그로 나누어지는 이러한 부분을 변경해 주는 속성 입니다. 예를 들어 css에서 인라인태그를 선택 후 display 속성으로 block라는 속성 값을 .. 2017. 7. 13. CSS3 - CSS 스타일 - 레이아웃의 기초 (22) CSS3 - CSS 스타일 - 레이아웃의 기초 (22) 오늘은 CSS3의 스물 두번째 내용으로 레이아웃의 관련된 내용에 대해서 알아보도록 하겠습니다.솔직히 지금까지 이전 포스팅에서는 css를 이용해 html 태그(요소)에 색상, 폰트, 크기 등등 기본적인 간단한 내용에 대해서 다루었는데 이 다음 포스팅 부터는 css에서 가장 중요한 부분인 홈페이지의 레이아웃을 만들 수 있는 속성에 관련되어 본격적으로 포스팅 할 계획입니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 레이아웃.. 2017. 6. 23. CSS3 - CSS 스타일 - 테이블(table)스타일 설정하기 2 (21) CSS3 - CSS 스타일 - 테이블(table)스타일 설정하기 2 (21) 오늘은 CSS3의 스물 한번째 내용으로 이전 내용에 이어 나머지 테이블(table)스타일 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 테이블의 배경색 테이블(table)태그 요소에 배경색을 입히는 내용 입니다.테이블의 배경색과 텍스트 색상을 변경하면 상당히 다른 테이블을 만들 수 가 있는데이 방법은 아래와 같습니다. 먼저 위와 같이 html문서에 테이블(.. 2017. 6. 22. CSS3 - CSS 스타일 - 테이블(table)스타일 설정하기 1 (20) CSS3 - CSS 스타일 - 테이블(table)스타일 설정하기 1 (20) 오늘은 CSS3의 스무번째 내용으로 테이블(table)스타일 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 테이블(table) 스타일 먼저 css에서 테이블(table)스타일이란 html의 테이블 태그(요소)에 사용되는 속성을 말하며 이에 관련된 속성은 아래 표와 같습니다. 속성 내용 border 테이블의 경계선 지정 하는 속성 border-collapse.. 2017. 6. 19. CSS3 - CSS 스타일 - 리스트(list)스타일 설정하기 (19) CSS3 - CSS 스타일 - 리스트(list)스타일 설정하기 (19) 오늘은 CSS3의 열아홉번째 내용으로 리스트(list)스타일 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 리스트(list) 스타일 먼저 css에서 리스트(list)스타일이란 html의 리스트 태그(요소)에 사용되는 속성을 말하며 이에 관련된 속성은 아래 표와 같습니다. 속성 내용 list-styl 리스트에 대한 속성을 한 줄로 정의 합니다. list-styl-.. 2017. 6. 16. CSS3 - CSS 스타일 - 링크(link)스타일 설정하기 (18) CSS3 - CSS 스타일 - 링크(link) 스타일 설정하기 (18) 오늘은 CSS3의 열여덟번째 내용으로 링크(link) 스타일 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 링크(link) 스타일 먼저 css에서 링크 스타일을 알기전 링크(link)란 사용자가 클릭하면 정해진 웹 페이지로 이동하는 수단을 말하며 이러한 수단을 css에서 링크에 스타일 효과를 줄 수 있는 방법을 말합니다. 링크의 스타일 효과는 아래와 같습니다. .. 2017. 6. 15. CSS3 - CSS 스타일 - 배경(background) 설정하기 2 (17) CSS3 - CSS 스타일 - 배경(background) 설정하기 2 (17) 오늘은 CSS3의 열일곱번째 내용으로 어제 포스팅에 이어 나머지 배경(background) 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 배경 이미지 부착 방법 먼저 배경 이미지 부착 방법에 관련된 내용으로 이전 포스팅에 배경 관련 속성의 표를 보면background-attachment라는 속성이 있을 겁니다. 이 속성은 말 그대로 배경 이미지를 부착 시.. 2017. 6. 14. CSS3 - CSS 스타일 - 배경(background) 설정하기 1 (16) CSS3 - CSS 스타일 - 배경(background) 설정하기 (16) 오늘은 CSS3의 열여섯번째 내용으로 배경(background) 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 배경(background) 설정하기 먼저 css의 배경 설정이란 background 라는 배경색을 입히는 속성으로 html태그(요소) 부분에 앞서 배웠던 16진코드, rgb코드, 키워드(영문색상이름) 등을 사용해 배경색을 입히는 속성입니다. 또 배경.. 2017. 6. 13. CSS3 - CSS 스타일 - 패딩(padding) 설정하기 (15) CSS3 - CSS 스타일 - 패딩(padding) 설정하기 (15) 오늘은 CSS3의 열다섯번째 내용으로 패딩을 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 패딩(padding) 설정하기 먼저 패딩을 설정하는 방법을 알아보기전 패딩이란 이 앞전 박스모델에서 설명했듯이 컨텐츠인 html 태그와 경계선 사이의 영역을 이야기 하는데 이러한 패딩 설정은 css에서 padding 이라는 속성으로 설정이 가능 하고 아래와 같이 패딩 속성의.. 2017. 6. 12. CSS3 - CSS 스타일 - 마진(margin) 설정하기 (14) CSS3 - CSS 스타일 - 마진(margin) 설정하기 (14) 오늘은 CSS3의 열네번째 내용으로 마진을 설정하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 마진(margin) 설정하기 먼저 마진을 설정하는 방법을 알아보기전 마진이란 이 앞전 박스모델에서 설명했듯이 경계선 주위의 영역을 이야기 하는데 이러한 마진 설정은 css에서만 margin이라는 속성으로 설정이 가능 하고 아래와 같이 마진 속성의 기본 값들이 있습니다. 속성 값.. 2017. 6. 9. CSS3 - CSS 스타일 - 태그의 크기 설정과 변경 (13) CSS3 - CSS 스타일 - 태그의 크기 설정과 변경 (13) 오늘은 CSS3의 열세번째 내용으로 마진 패딩을 알아보기 전 CSS 에서 태그의 크기를 설정하는 방법과 변경하는 방법에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 태그의 크기 설정이란? 태그의 크기 설정이란 말그대로 css에서 태그를 선택자로 선택한 다음width (가로, 폭)과 height(세로, 높이) 속성을 이용해 태그의 크기를 설정하는 방법 입니다. 위 내용은 "대표적인 블.. 2017. 6. 8. CSS3 - CSS 스타일 - 경계선 - 둥근 경계선과 경계선의 그림자 (12) CSS3 - CSS 스타일 - 경계선 - 둥근 경계선과 경계선의 그림자 (12) 오늘은 CSS3의 열두번째 내용으로 CSS 경계선에 관련된 속성중 둥근 경계선과 경계선의 그림자 속성에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 둥근 경계선이란? 둥근 경계선이란 말 그대로 border-ridius 라는 속성을 이용해 경계선을 둥글게 만드는 방법이며 사용방법은 아래와 같습니다. 위 는 css에서 p태그를 선택후 이전 포스팅에서 배운 border .. 2017. 6. 7. CSS3 - CSS 스타일 - 경계선 - 경계선 폭과 색상 (11) CSS3 - CSS 스타일 - 경계선 - 경계선 폭과 색상 (11) 오늘은 CSS3의 열한번째 내용으로 CSS 경계선에 관련된 속성중 경계선 폭과 색상에 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 경계선 폭이란? 경계선 폭은 border-width 라는 속성으로 경계선의 폭(두께)를 지정하는데 이러한경계선의 두께는 흔히 px 단위 또는 border-width 속성의 값인 thick, medium, thin 등으로일정하게 경계선 두께를 아래와 .. 2017. 6. 6. CSS3 - CSS 스타일 - 경계선 - 경계선 스타일 (10) CSS3 - CSS 스타일 - 경계선 - 경계선 스타일 (10) 오늘은 CSS3의 열번째 내용으로 CSS 경계선에 관련된 속성중 경계선과 경계선 스타일 대해서 알아보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - 경계선이란? 먼저 경계선이란 CSS에서 border 란 속성을 이용해 HTML 태그 주변에 경계선을만들언 주는 속성으로 관련 속성에는 경계선의 스타일, 색상, 폭, 둥근경계선, 경계선에 그림자를 입히는 것들이 있으며 경계선의 스타일 부터 순서대로 하.. 2017. 6. 5. CSS3 - CSS 스타일 - 박스 모델 (9) CSS3 - CSS 스타일 - 박스 모델 (9) 오늘은 CSS3의 아홉번째 내용으로 CSS 박스 모델이란 무엇인지 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) css 스타일 - 박스 모델이란? 먼저 박스 모델이란 웹 브라우저에서 각 HTML (태그)를 사각형으로 간주하는데이러한 태그를 박스 사각형 형태로 그리는 것을 박스 모델 이라고 부릅니다. 이 때 CSS는 각 박스의 특징 예를 들어 박스의 배치, 박스의 색상, 박스의 경계선등을 결정하게 되는데 기본적으.. 2017. 6. 2. CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 2 (8) CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 2 (8) 오늘은 CSS3의 여덟번째 내용으로 CSS 스타일 속성 중 어제 못다한 텍스트 속성에 관련되어 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) 4. 텍스트 변환 텍스트 변환 입니다.텍스트의 변환은 이전 포스팅에 표에 나와 있듯이text-transfor 속성을 사용하는데 이러한 속성은 아래와 같이 값이여러 가지가 있습니다. 위 text- transform 속성은 위와 같이 none, capit.. 2017. 6. 1. CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 1 (7) CSS3 - CSS 스타일 - 텍스트에 관련된 속성 사용법 1 (7) 오늘은 CSS3의 일곱번째 내용으로 CSS 스타일 속성 중 텍스트에 관련된 내용에 대해서 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) css 스타일 - 텍스트란? 먼저 css 에서 텍스트란 텍스트의 장식 기능을 제공하는 스타일로 예를 들어텍스트정렬, 텍스트 색상, 텍스트 변환 등의 기능을 말하며이러한 텍스트의 속성은 아래 표와 같습니다. 속성 내용 color 텍스트의 색상을 변경 dire.. 2017. 5. 31. CSS3 - CSS 스타일 - 폰트에 관련된 속성 사용법 (6) CSS3 - CSS 스타일 - 폰트에 관련된 속성 사용법 (6) 오늘은 CSS3의 여섯번째 내용으로 CSS 스타일 속성 중 폰트에 관련된 내용에 대해서 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) css 스타일 - 폰트란? 먼저 css 에서 폰트란 css 텍스트의 폰트의 종류, 색상, 장식 크기 등을 지정하는 속성으로 아래와 같은 속성들이 있습니다. 속성 내용 font 한 줄에서 모든 폰트의 속성을 설정할 때 이용 font-family 폰트 패밀리 설정 (.. 2017. 5. 30. CSS3 - CSS 스타일 - 색상 지정방법 (5) CSS3 - CSS 스타일 - 색상 지정방법 (5) 오늘은 CSS3의 다섯번째 내용으로 CSS 스타일 중 색상에 관련된 내용에 대해서 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) css 스타일 - 색상이란? 먼저 css 에서 색상을 표현하는 방법입니다. css 에서는 색상을 표현 하는 방법이 있는데 이 앞전 포스팅에 서 색상을 지정했던 영문 색상으로 지정 할 수도 있고16진수 10진수 퍼센트 등으로 표현이 가능 합니다. 방법 내용 이름으로 표현 "red" .. 2017. 5. 29. CSS3 - CSS 삽입 - 인라인 스타일, 내부 스타일, 외부 스타일, 다중 스타일 (4) CSS3 - CSS 삽입인라인 스타일, 내부 스타일, 외부 스타일, 다중 스타일 (4) 오늘은 CSS3의 네번째 내용으로 CSS 삽입에 대해서 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) 먼저 CSS 삽입이란? 먼저 css 삽입이란 말그대로 스타일 시트(css)를 문서에 삽입 하는 내용인데 이러한 css 스타일 시트 삽입하는 방법은 아래와 같이 구분이 됩니다. - 스타일 시트 삽입 방법 - 1. 인라인 스타일 시트 2. 내부 스타일 시트 3. 외부 스타일 .. 2017. 5. 28. CSS3 - CSS 선택자 - 클래스 선택자, 의사 선택자, 속성 선택자 (3) CSS3 - CSS 선택자 클레스 선택자, 의사 선택자, 속성 선택자 (3) 오늘은 어제 설명하지 못한 선택자에 대해서 이어 설명 하도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) 4. 클래스 선택자 네번째 클래스 선택자 입니다. 클레스 선택자란 앞서 배운 아이디 선택자와 비슷하게 똑같은 태그중 특정한 위치에 있는 태그를 선택할 수 있음과 비슷합니다. 그런데 이러한 클레스 선택자와 아이디 선택자가 다른 것을 이야기 하자면 클래스 선택자는 몇개의 태그를 하나의 클래스로 묶어서.. 2017. 5. 27. CSS3 - CSS 선택자 - 타입 선택자, 전체 선택자, 아이디 선택자 (2) CSS3 - CSS 선택자 타입 선택자, 전체 선택자, 아이디 선택자 (2) 오늘은 CSS3의 두번째 내용으로 CSS의 선택자에 대해서 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) 먼저 CSS 선택자란? 먼저 css의 선택자란 css에서 가장 중요한 부분입니다. 이 선택자란 말 그대로 HTML 태그를 선택하는 부분인데 이러한 CSS 선택자를 사용하는 이유중 예를 꼽자면 일반적으로 모든 태그에 동일한 스타일을 적용하는 일이 드문데 특정 태그를 선택한 후에 여.. 2017. 5. 26. CSS3 - CSS와 문법 및 위치 (1) CSS3 - CSS와 문법 및 위치 (1) 오늘은 CSS3의 첫번째 내용으로 CSS와 문법 그리고 HTML에서 사용시 위치는 어디에 사용해야 적절한지에 대해서 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) 먼저 CSS3란? 먼저 CSS3란 스타일시트라고 하며 기존딱딱하던 HTML에 선택자를 이용해 스타일을 입혀주는 것이라고 생각 하시면 됩니다. 현재 CSS3는 현재 HTML5와 같이 개발중인 규격으로 CSS3모듈로 구성이 되어 있어 필요한 부분만 선택자를 이.. 2017. 5. 25. 이전 1 다음 반응형
