일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- union find
- Trie
- Brute Force
- two pointer
- DP
- 그래프
- MYSQL
- Stored Procedure
- SQL
- 다익스트라
- Two Points
- Hash
- Dijkstra
- String
- 스토어드 프로시저
- binary search
- 이진탐색
- Today
- Total
목록web (43)
codingfarm
$\bullet$ JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. $\bullet$ 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. $\bullet$ 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. $\bullet$ 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질..
위와 같은 형태의 웹페이지를 만드려 한다. 우선 레이아웃을 대략적으로 만들어보자. 위 레이아웃과 같은 형태의 웹페이지를 만든다 기본적인 구조는 아래와 같다 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..
www.w3schools.com/html/html5_semantic_elements.asp opentutorials.org/module/1892/10954 웹에서 정보로서의 가치가 중요해지면서 사람과 검색엔진 등 다방면 활용하기 좋게 하기 위한 여러 시도가 있었으며 semantic tag(의미론적 태그)는 그 시도들 중 제일 유의미한 결과를 가저다 주었다. semantic은 굉장히 추상적이고 광범위 하기에 한마디로 표현하기가 힘들다. 그렇기에 여기서는 HTML tag 를 의미에 맞게 잘 쓰기 위한 방법론이라 이해하면 된다. 가령 대표적인 semantic으론 tag의 이름만으로 웹의 상단,중단,하단, 제목등을 구분하게끔 하기 위한것이 있다. 가령 아래와 같은 HTML 코드를 보자 1 2 3 4 5 6 7 ..
어떤 데이터가 있을때 이를 설명하는것이다. 가령 html의 태그들은 그 태그들을 감싼 컨텐츠를 설명한다는 점에서 이들또한 meta data라 할 수 있다. 하지만 웹페이지의 저자, 내용등을 설명하고 요약하며 검색하기 위한 키워드 등을 설명하기 위한 수단도 필요하다. 이를 위해 쓰는것이 태그이다. 1234567891011121314151617181920212223 생활코딩은 일반인에게 프로그래밍을 알려주는 온라인/오프라인 강의입니다. Colored by Color Scriptercs
www.youtube.com/watch?v=XY5G4RN_LKg&list=PLuHgQVnccGMDUzDDCKW-pCZQY-MMCX5yB&index=27&t=1s 파일 업로드는 html보다는 서버측에서 해야할 일이 훨씬 많기에 html측면에서는 내용이 굉장히 추상적일수 밖에 없다. 그렇기에 여기서는 html쪽에서 해야할 부분만을 알아보는 방식으로 포스팅하겠다. 1 2 3 4 5 6 7 8 9 10 11 12 Colored by Color Scripter cs 제출버튼을 누르면 사용자가 선택한 파일은 upload.php라는 php어플리케이션이 이 파일을 받아서 컴퓨터에 저장하게된다. 이는 php뿐만 아니라 파이썬, 루비등도 마찬가지다. form태그에서 method는 post로 설정하고 enctype도 위 코..
form은 사용자가 입력한 정보를 서버로 전송하는 역할을 담당한다. 데이터를 전송하기 위해서는 여러 방법이 존재하며 이때까지 "get"이라는 방식이 있다. 그리고 여기서는 이외에 "post"방식에 대해 알아보겠다. 이를 이해하기 위해선 서버에 대한 지식도 필요하지만 서버쪽에서 정보를 받아 처리하는 메커니즘은 생활코딩의 "자바스크립트로 로그인 기능 구현하기" 세션을 참고할것 지금 당장은 서버에 대한 정보를 블랙박스화 하고 진행한다. 그렇기에 이해 안가는 부분은 넘길것 1 2 3 4 5 6 7 8 9 10 11 12 13 Colored by Color Scripter cs 위 html코드를 브라우저로 실행해보면 입력칸에 egoing 문자열을, 패스워드에 111111을 입력하고 "질의 보내기"버튼을 클릭한다...
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 text : password : textarea : default value Colored by Color Scripter cs 위 HTML파일을 브라우저로 열면 아래와 같다 겉보기에는 label 태그의 역할을 잘 모르겠다. 하지만 label에서 for로 설정한 text나 password문자열을 클릭하면 이와 연결된 input창의 커서가 활성화 되는것을 확인 할 수 있다. for를 통해 일일이 활성화 하는것이 귀찮다면 아래처럼 label태그로 통째로 감싸는 방법도 존재한다. 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 text : ..