본문 바로가기

홈페이지만들기

 (72)
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..
워드프레스 Vantage테마 Navigation 워드프레스 Vantage테마 기본네비게이션 설정 Theme Settings Navigation 홈페이지를 제작할때 메뉴에 중요성은 엄청나게 크다. 그래서 메뉴의 시간적인 투자와 고민을 많이 한다. 일반적으로 Html이나 CSS를 통해 제작을 많이 하지만 이런 코딩에 상관없이 워드프레스는 플러그인을 통해 쉽게 제작하고 수정 할 수 있다.워드프레스 메뉴가 얼마나 빠르고 편리한지에 대해 알아보겠습니다. 워드프레스의여러가지 테마와 여러가지 플러그인에 있는데 반응형의 네비게이션의 변화에 대해 알아보도록 하겠습니다. 관리자 페이지 왼쪽메뉴 > 외모> 사용자 정의하기버튼을 클릭하고 사용자UI를 보면 Theme Settings에 Navigation이 있다. Navigation 모바일 메뉴는 작은 화면 장치를위한 특별한..
Vantage무료테마 기능 Home - Home Page Slider 워드프레스 무료테마 -Vantage무료테마사이트 기능 Home - Home Page Slider 워드프레스 Vantage무료테마 사이트 기능둘러보기를 이전단락에 이어서 설명하기로 하겠습니다.워드프레스 어드민을 통하여 로긴하고 다시 사용자정의하기를 클릭후 수정하는 인터페이스가 나오면 Theme Settings에 들어가 Home에 들어가시면 홈페이지 슬라이드라는 타이틀이 나오는데 Home page slider는 메인에 나오는 슬라이드를 설정 할 수 있습니다. 참고로 이기능은 홈페이지 제작 할 때 가장 많이 사용하면서 포인트로 사용하기 아주 좋은 플러그인 입니다. 이런 플러그인을 잘 활용하면 더욱 눈에 쏙 들어오는 홈페이지를 만들수 있으니 많은 연습을 하기 바랍니다.Home Page Slider ▼이 테마는 ..
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 활용하기

티스토리툴바