일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- Two Points
- SQL
- DP
- Hash
- Brute Force
- MYSQL
- binary search
- 이진탐색
- String
- 그래프
- Stored Procedure
- Trie
- two pointer
- Dijkstra
- 스토어드 프로시저
- union find
- 다익스트라
- Today
- Total
목록web/CSS3 (12)
codingfarm
위와 같은 형태의 웹페이지를 만드려 한다. 우선 레이아웃을 대략적으로 만들어보자. 위 레이아웃과 같은 형태의 웹페이지를 만든다 기본적인 구조는 아래와 같다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 cs header 일단 header부터 작성해보겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81..
웹페이지를 만들때 가장 많이 사용하는 스타일속성이다. 부유하는 대상을 만들 때 사용하며 처음 float속성을 개발했을때는 아래처럼 img태그를 일반 태그와 함께 쓰기위해 고안됐다. 아래의 예로 확인해보자 1 2 3 4 5 6 7 8 9 10 11 12 13 Float Style Property Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. D..
요소의 위치를 2가지 방법으로 설정할수있다. $\bullet$ 절대 위치 좌표 : 요소의 $X$좌표와 $Y$좌표를 설정해 절대 위치를 지정한다. $\bullet$ 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정한다. 1. position 상대위치 좌표를 쓸때는 position속성에 static 또는 relative 키워드를 적용한다. static키워드를 적용하면 태그가 "위에서 아래로"아 "왼쪽에서 오른쪽으로" 순서에 맞게 배치된다. relative 키워드를 적용하면 static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 이동할 수 있다. 반면 절대 위치 좌표를 사용할 때는 position 속성에 absolute 키워드 또는 fixed 키워드를 적용한다. 키워드 설명 stati..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 CSS3 Font Property .font_big { font-size: 2em; } .font_italic { font-style: italic; } .font_bold { font-weight: bold; } .font_center { text-align: center; } .button{ width: 150px; height: 70px; background-color: #FF6A00; border: 10px solid #FFFFFF; border-radius: 30px; box-shadow: 5px 5px 5px #A9A9A9; } .butto..
웹 페이지의 레이아웃 구성에 가장 중요한 스타일 속성이다. 이 절에서는 border속성을 제외한 width, height, margin, padding속성에 대해 알아보겠다. width 속성과 height 속성 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 CSS Property Basic div{ width: 100px; height: 100px; background-color: red; } Colored by Color Scripter cs 위코드를 실행하면 div태그의 너비와 높이가 100픽셀로 지정되었음을 확인 가능하다. 그렇다면 div태그 내의 문자들이 박스영역을 벗어날정도로 많이 쓰이면 어떻게 될까? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ..
태그가 화면에 보이는 방식을 지정하는 속성이다. html5 시대가 되면서 다양한 display속성이 존재하게 되었다. 하지만 모든 display속성을 제대로 지원하는 웹브라우저는 없다. 따라서 예제 코드와 함께 제일 중요한 속성 몇가지만 정리한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 CSS3 Style Property Basic Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dummy Colored by Color Scripter cs none 화면상에서 해당태그를 사라지게 만든다. 1 2 3 4 5 #box{ display : none; } cs 이는 태그의 존재를 지워버리는것이므로 레이아웃 자체를 변경시킬수도 있..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 #a{color : rgb(82,124,180)} #b{color : #32F6A4} AAA BBB Colored by Color Scripter cs
font-size 기능을 이용하여 문자의 크기를 조정가능하다. 이때 단위는 크게 px와 rem 2가지로 나뉜다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #px{font-size:16px;} #rem{font-size:1rem;} PX REM cs 이제 웹브라우저의 설정창에서 글꼴의 크기를 줄여보겠다. 기존의 16으로 설정된 크기를 9로 줄여본다. 단위를 px로 설정한 문자PX는 그대로지만 rem으로 설정한 REM은 작아젔다. 즉, 사용자에게 글자 크기의 조절을 위한 권리를 주고싶다면 rem단위로 설정하는것이 유용하다.
각 element의 상태에 따라 여러가지 특수한 선택들을 가능케 하는 선택자이다. 클래스 선택자처럼 행동하지만 클래스 선택자는 아니다. 1234567891011121314151617181920212223242526272829303132333435363738394041 a:link{ /*방문 안한곳일 경우 글자색 변화*/ color : black; } a:visited{ /*이미 방문한 링크일 경우 글자색 변화*/ color:red; } a:hover{ /*마우스를 올릴경우 글자색 변화*/ color:yellow; } a:active{ /*좌클릭 중일 경우 글자색 변화 좌클릭할경우 hover와 active가 동시에 활성화 되며 나중에 있는것이 최종적으로 덧씌워지기 때문에 active를 hover보다 뒤로 ..
nth-child() n번째 자손중 타입이 일치하는 것만 선택한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 p:nth-child(3) { background: red; } The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. The fifth paragraph. The first paragraph. The second paragraph. The third paragraph. The fourth paragraph. The fifth paragraph. Colored by Color Scripter ..
아래처럼 크게 2가지 방법이 존재한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 h2{color:blue} Hello World Hello World Colored by Color Scripter cs
CSS란 웹페이지를 꾸며주는 언어이다. 그러므로 HTML에 대한 전반적인 지식이 사전에 필요하다. 우선 HTML의 본질에 대해 알아야 하며, 이는 정보에 있다. HTML은 전자출판(정보의 생산, 보관, 전송)을 목적으로 둔 언어이다. 즉, HTML에서 제일 중요한것은 어떻게 정보를 표현할것인가 에 있다. 최초의 HTML은 웹페이지를 멋지게 꾸밀 기능이 전무했기에 웹디자인이라는 용어 자체가 전무했다. 그렇기에 웹페이지가 아름답게 보이고 싶은 사람들의 요구사항에 부합하기 위해 기존의 정보에 목적을 둔 tag이외에 디자인을 위한 tag가 생겨났다. 대표적으로 태그가 있으나, 이 tag는 재사용성 문제와 정보전달이라는 HTML본연의 역할을 부합하지 못했기에 오늘날 사용이 금기시 되어있다 볼 수 있다. 이렇듯 H..