홈페이지만들기/Html_css&css3 (27) 썸네일형 리스트형 CSS 링크의 color와 background-color CSS 링크의 color와 background-color 홈페이지만들기를 할때 디자인이 완료되면 코딩을 하게 되는데 코딩에 있어 가장 많이 쓰는건 CSS의 링크입니다. CSS 링크의 color와 background-color기본 링크와 응용한 고급버튼 만들기를 알아보겠습니다.예제 - 텍스트 a { color: hotpink; }, a:link { color: red; }, a:link { text-decoration: none; }, 버튼 a:link { background-color: yellow; } 웹디자이너들이 가장 많이 사용하는 정의 - 링크는 모든 CSS 속성 (예와 스타일 수 color, font-family, background등).또한 링크의 상태 에 따라 다르게 스타일을 지정할 수 있습.. CSS style 컬러 기본설정 CSS style컬러 기본설정 홈페이지를 디자인 할때 가장 중요한건 css style중에 font color입니다.홈페이지 제작하거나 테이블 그리고 네비게이션등을 만들때 가장 기본적으로 알아두어야 할 css style color 속성을 알려 드리겠습니다.컬러는 크게 html에서 대표적으로 쓰는 기본색상black (검정), silver (은색)등이 있으며 두번째는 16진수로 나타내는 정의가 있으며, RGB (RED, GREEN, BLUE)가 있습니다. 이들은 전부 웹상에서 가장 흔하게 사용하는 색상지정입니다. 하나하나 이해를 돕자면 아래의 표를 참고하시기 바랍니다. background-color="white" 백그라운드 색상 과 font-color="black" 텍스트 색상 그리고 링크 속성까지 a hov.. vertical-align와 text-align CSS 활용하여 정렬하기 vertical-align와 text-align CSS 활용하여 정렬하기 텍스트를 가로정렬과 세로정렬을 알아보도록 하겠습니다. CSS의 텍스트 정렬에는 vertical-align(세로정렬)과 text-align(가로정렬)가 있는데 우선 vertical-align 은 요소들 간의 세로정렬을 조절하는 CSS입니다. block에는 적용이 되지 않고 inline에만 가능합니다. 태그가 아닌 html에서 적용하려면 display : table-cell을 적용해서 inline으로 변경해야 합니다. 요소가 줄 바꿈이 되지 않고 옆으로 정렬된 것은 inline 으로 바뀐 것입니다. text-align 을 이용해서 마지막 text4번 속성에 left, right, center, justify 를 이용해서 정리하면 보다 .. html 순서 및 목록 만들기 html 순서 및 목록 만들기 ul li, ol li, dl dt dd 활용하여 목록 및 순서는 기본으로 쓰는 것이지만 활용에 있어 어느 태그보다 많이 활용과 응용이 가능합니다. 태그는 Unordered List 약자로 머리 기호에 번호 없이 기호를 붙이는 태그입니다. 을 단독으로 사용하는 것이 아니라 내부에 태그로 목록을 추가하게 됩니다. 태그 하나하나가 목록이 되며 list-style-type 속성으로 기호를 결정하게 됩니다.우선 기본적으로 html 순서 및 목록 만들기를 해보기로 하겠습니다. 익스플로러6 익스플로러7 익스플로러8 지하철1호선 지하철2호선 지하철3호선 포토샵 일러스트 플래시 파이어폭스 오페라 사파리 크롬 익스플로러 용어의제목 용어의설명,해석,해설 용어의설명,해석,해설 용어의설명,해석,.. html 창크기 조절(반응형코딩) 창크기가 최소 1025px 이상일때 / 최소 768px ~ 1024px까지 / 최대 767px 창크기가 최소 1025px이상 일때반응형 홈페이지를 만들때는 꼭 이걸 기본으로 참고하면서 사이즈에 맞게 코딩하면 된다. @media all and (min-width:1025px) {body{background-color:yellow}} 최소 768px ~ 1024px까지 일때@media all and (min-width:768px) and (max-width:1024px) {body{background-color:red}} 최대 767px이하 일때@media all and (max-width:767px) {body{background-color:green}} 창크기가 최소 1025px 이상일때 - yellow.. ul li 가로정렬로 메뉴만들기 (css가로정렬) ul li 가로정렬 li에 float : left로 왼쪽 정렬하고 margin:1px을 설정하여 박스의 여백을 설정한다. 그리고 박스의 텍스트는 li a에 text-align : center로 가운데 정렬을 하면 된다. 링크는 를 통해 URL을 넣어주면 완성된다. li {float:left; list-style:none; margin:1px;} li a {display:block; width:150px; height:40px; background:#c00; color:#fff; border1px solid blue; font-size:12px; font-family:"돋움"; text-align:center; padding-top:10px; text-decoration:none;} li a span {d.. div 프레임나누기 DIV 프레임나누기프레임을 나눌땐 항상 어떤형태의 레이아웃을 구현할까 머리속으로 생각하면서 테이블이나 레이어구조를 만든다. 가장 주의할점은 어떤형태로 변할지에 대해 변칙적으로 구현 할 수있는 스타일을 만들어야 한다. 그럼 이번에는 스타일 정의를 통해 구조를 만들어 보도록 하겠다. 타이틀왼쪽중앙정렬오른쪽리스트※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※[홈페이지만들기] - div 배치하기[홈페이지만들기] - html 테이블구조 만들기[홈페이지만들기] - first-child / last-child 활용하기 div 배치하기 div 프레임나누기/ 배치하기Html프레임나누려면 가끔 컴터나 OS, 모니터, 해상도, 브라우져, 따라 엉클어 진다. 그래서 고정하면서 배치하는 방법에 대해 알아보도록 하겠다. 우선은 %를 통해서 여백을 정리하는 방법이다. 형태로 감싸준 후 전체를 div로 CSS정의 내린다.왼쪽오른쪽가운데01가운데02가운데03각각의 형태를 생각하며 직접 스타일을 정리한다. 이런 작업들이 많아 자주 만들다 보면 점점 적응이 되면서 나중엔 스타일시트를 직접 div에 넣지 않고 헤드에 정의를 바로 만들면서 작업 할 수 있을 것이다. [홈페이지만들기] - 폰트 URL 적용하기[홈페이지만들기] - first-child / last-child 활용하기[홈페이지만들기] - html 테이블구조 만들기 이전 1 2 3 4 다음
