본문 바로가기
반응형

좋아하는 것_매직IT/14.css

16.웹프로그래밍, CSS, 레이아웃을 위한 div 요소 사용하기에 대해서 알아볼께요. 블로그목적 CSS관련 레이아웃을 위한 div 요소에 대해서 공부및 정리 후 공유한다. ​ 레이아웃을 위한 div 요소 활용에 대해서. div 요소를 사용해서 아래와 같은 절차로 레이아웃을 만들 수 있음. 첫째, html 파일을 생성하고 div 요소를 생성 둘째, css style 통해서 요소의 위치 및 색상을 지정 마지막, 원하는 레이아웃 완성 추가적으로, div 는 블록 수준의 요소이고, 다른 요소를 그룹핑하는데 보통 사용됨. ​ 그럼, div 를 사용해서 레이아웃을 실제로 만들어 보자. 목표 그럼 지금 부터 목표로 달려가 보자. 우선, html 파일을 생성 한 후 웹 페이지 내용을 아래와 같이 입력함. exam0_div_layout.html 웹페이지 실행화면 설명 아직 css 를 작성하지 않아서 실제.. 더보기
15.웹프로그래밍, CSS, 웹페이지의 요소 위치 정하기에 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 요소 위치 정하기에 대해서 공부하고 정리후 공유한다. ​ 웹페이지의 요소 위치에 대해서 알아보자. 보통 요소의 위치는 top/bottom/left/right 속성으로 지정함. 예를 한번 들어보자. ​​​​​​​​​​​​​​주의할점 top/bottom/left/right 모두 컨테이너 경계선에서의 오프셋(offset[편차/차이])이라는 점. 즉, right: 200px; 라고 하면 컨테이너의 오른쪽 경계에서 200 픽셀만큼 떨어진 곳을 의미함. 그리고, CSS의 position 속성은 요소의 위치 설정 방법을 나타냄. 즉, 절대적인 위치설정 or 상대적인 위치 설정인가 ? top/bottom/left/rigth 속성은 position 속성이 먼저 설정되지 않으면, 동작하지 .. 더보기
14.웹프로그래밍, CSS, 웹페이지의 레이아웃(layout) 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 레이아웃에 대해서 공부및 정리 후 공유한다. 웹페이지의 레이아웃(layout) 이란? 웹페이지 레이아웃에는 HTML 요소의 위치, 크기등이 포함되어 있음. 예를 들면, 쉽게말해서 집을 새로 사기위해서 계약금, 중도금, 잔금을 치르고나서 등기를 치고, 새집에 들어가게되면, 집안에 TV, 가구, 냉장고 등등을 배치하게되는 상황과 유사하다고 해야 할까? 암튼 그렇다..^^; 박스모델(Box Model)에 대해서 알아볼까요? 박스모델이란? 웹 브라우저가 각 요소를 화면에 그릴 때는 무조건 사각형으로 간주한다는 것을 말함. 사각형을 이루는 요소는 아래와 같음. 패딩(padding) 내용과 테두리 사이의 간격 눈에 보이지 않음. 테두리(border) 내용과 패딩 주변을 감싸는 테두리.. 더보기
13.웹프로그래밍, CSS, 테이블(table) 스타일을 꾸며보는 방법에 대해서 알아볼께요..^^ 블로그목적 CSS관련 테이블에 대해서 공부및 정리후 공유한다. 테이블의 스타일을 변경하려면 어떻게 해야 될까? 정답 CSS 를 사용하면 개선 및 변경이 가능하다. 테이블의 스타일의 속성은? 속성 설명 비고 border-collapse 이웃한 셀의 경계선을 합칠 것인지에 대한 여부 width 테이블의 가로 길이 height 테이블의 세로 길이 border-spacing 테이블 셀 사이의 거리 empty-cells 공백 셀을 그릴 것인지 여부 border 테이블의 경계선 table-align 테이블 셀의 정렬 설정 그럼, 테이블의 스타일을 변화시켜보자! 테이블의 경계 border(경계선) 테이블 뿐만 아니라, HTML 요소의 경계선을 설정할 때 사용하는 중요한 속성임. 속성 스타일 색상 두께 예시 ​​​​​.. 더보기
12.웹프로그래밍, CSS, 리스트(list) 스타일을 꾸며보는 방법에 대해서 알아볼께요 ^^ 블로그목적 CSS관련 리스트에 대해서 공부및 정리 후 공유한다. 리스트 스타일을 한번 꾸며 보아요. 리스트 스타일도 CSS로 지정이 가능함. 속성 속성 설명 비고 list-style 리스트에 대한 속성을 한줄로 설정함. 리스트 항목 마커를 이미지로 지정함. list-style-position 리스트 마커의 위치를 안쪽 or 바깥쪽으로 지정함. list-style-type 리스트 마커의 타입을 지정함 예시 list-style-type : disc, circle, square : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, .. 더보기
11.웹프로그래밍, CSS, 링크(Link)스타일을 꾸며보는 방법에 대해서 알아볼께요 ^^ 블로그목적 CSS관련 링크스타일에 대해서 공부하고 정리 후 공유한다. 링크(Link)란? 사용자가 클릭하면 정해진 웹 페이지로 이동하는 속성을 가짐. CSS에서는 이런 링크에 대한 스타일도 지정할 수 있음. ​ 링크 스타일에 대해서 알아보자. 링크는 보통 4가지 스타일을 가진다. a:link 방문되지 않은 링크의 스타일 a:visited 방문된 링크의 스타일 a:hover 마우스가 위에 있을 때 스타일 a:active 마우스로 클릭할 때의 스타일 링크 스타일을 설정 시 규칙 주의! 반드시 a:link / a:visited 다음에 a:hover 가 위치해야함. 그리고 a:hover 다음에 a:active 가 위치해야함. 링크의 스타일 설정하기 색상설정 예시 웹브라우저 실행화면 위의 소스코드를 웹브라우저에서.. 더보기
10.웹프로그래밍, CSS, 배경설정은 어떻게 할까요? 궁금하시면 클릭!^^ 블로그목적 CSS의 배경설정하는 방법을 공부하여 정리해본다. CSS를 이용하여 배경설정하는 방법에 대해서 알아볼께요. CSS를 사용하면 요소의 배경을 설정할 수 있어요. ^^ 아래는 배경과 관련된 속성이예요~ 속성 설명 비고 background 한 줄에서 모든 배경속성을 정의함 background-color 배경색을 정의함. background-image 배경 이미지를 정의함. background-position 배경 이미지의 시작 위치를 지정함. background-size 배경 이미지의 크기를 지정함. background-repeat 배경 이미지의 반복 여부를 지정함. 배경색 설정 background-color 배경을 파란색으로 설정하는 예시 3가지 위와 같이 color / rgb / # 으로 설정할.. 더보기
9.웹프로그래밍, CSS, 마진(margin)과 패딩(padding) 대해서 알아볼께요. ^^ 블로그목적 CSS관련 마진과패딩에 대해서 공부및 정리후 공유하려고한다. 마진(margin)과 패딩(padding) 대해서 한번 알아볼께요 ^^; HTML 요소 크기 설정 CSS 에서는 모든 요소의 크기를 width / height 속성을 이용 HTML 요소 크기 변경 resize 속성을 both라고 설정하면 양방향 크기 조정 매커니즘을 제공하여 사용자가 요소의 높이와 너비를 모두 조정할 수 있게 함. resize 값 both horizontal vertical none 마진 설정 CSS에서 지정이 가능함. 마진은 음수로 지정될 수 있음. 음수로 지정되면, 요소가 겹쳐 보이게 됨. 웹디자인에서는 이것을 고의적으로 이용하는 경우도 많음. 특히 이미와 텍스트를 나란히 표시할 때 사용함. 값 설명 비고 auto.. 더보기
반응형

티스토리툴바