블로그를 쓸 때 매번 Visual Studio 켜서 쓰고 결과 확인해서 붙여넣는 걸 반복하니 귀찮기도 하고, 그림이 들어가면서 글 전체 모양도 안 좋아지는 것 같아 어떻게 할까 하다 와 태그를 알게 되었다. 아직 html이 익숙하지 않아서 애를 먹고 있었는데 너무나도 유용한 태그를 알게 되어 기쁘다. 태그 html에서는 아무리 내가 Enter를 쳐도 줄바꿈이 일어나지 않는다. html 안에서는 를 하거나 를 써야만 줄바꿈을 할 수 있다. 하지만 태그 안에서는 일일히 태그를 쓰지 않아도 문서에서 다루는 Enter, Tap, Space 기능을 쓸 수 있다. 예 줄바꿈을 br 없이 하려면 pre를 이용하세요~! html 내에서 줄바꿈을 해도 pre를 쓰지 않은 상태에서 실행을 하면 이와 같은 결과가 나온다. ..
HTML 을 작성하다 보면 색상이 많이 필요하다. 또, 단순한 색상이 아니면 색상을 RGB 로 표현하거나 코드로 표현해야 하는데 뭘 써야 하는지 모를 때가 있다. 색상 코드를 알아내고 싶다면 Color Cop 을 사용해 외부에 있는 색의 코드를 알아내면 된다. 스포이드를 클릭한후 드래그해서 원하는 색상에 놓으면 알아서 코드와 RGB좌표를 알려준다. 설치하려면 다음 링크로 들어가면 된다. 프리웨어~ 마음껏 쓸 수 있다. http://colorcop.net/download/ download The easiest way to install Color Cop is to download the self-installing version. If you use the installer it's easy to remo..
오늘은 float 과 clear 를 소개하려고 한다. 웹페이지를 만들 때 이미지를 넣고 글을 쓰는 경우가 종종있는데 글이 이미지를 둘러쌀지 말지 결정하는 속성이다. float float 은 둘러싸기를 지정하는 속성이다. 둘러싸는 방식에는 왼쪽으로 이미지를 놓고 뒤에 계속되는 요소는 오른쪽으로 둘러싸게끔 하는 left 오른쪽에 이미지를 놓고 뒤에 계속되는 요소는 왼쪽에 둘러싸게끔 하는 right 둘러싸기를 하지 않는 none 이렇게 세가지 방식이 있다. float을 쓰려면 에서 쓰면 되고 이건 이미지에 대한 속성 부여이므로 img{float:right;} 으로 쓰면 된다. class는 레이아웃이나 전체 틀을 보정하거나 글자의 속성부여하는 것이고 img 는 이미지에 대한 속성을 부여한다는 것을 알아두면 헷갈..
CSS 에서 중요한 개념인 박스에 대해서 알아보자. 사실, 모든 요소는 박스라는 틀 안에 있어서 박스를 조정한다는 것은 요소를 이루고 있는 틀을 변경한다고 볼 수 있다. 박스의 폭과 높이 박스의 폭과 높이를 지정하려면 width 와 height 를 사용하면 된다. 박스가 그려지는지 보기 위해서 테투리에 선을 추가해서 보이겠다. .mybox 에 폭 200px, 높이는 100px 로 지정하였다. 다음과 같이 나온다. '리스트' 바깥에 테두리가 설정되었다. 테두리만큼의 박스가 형성됨을 알 수 있다. 폭(width)과 높이(height)는 아무 지정을 안 하면 auto(자동) 로 지정된다. 여백, 패딩, 테두리 박스의 여백과 패딩 테두리를 설정할 수 있는데 설정값이 많을 뿐 크게 어려운 건 없다. margin ..
list-style-type list-style-type은 리스트의 마크를 지정한다. none 마크 없음 disc 검정 동그라미(●) circle 흰 동그라미(○) square 검정 사각(■) decimal 숫자 decimal-leading-zero 맨앞에 0를 붙인 숫자(01,02,...) lower-roman 소문자 로마 숫자 upper-roma 대문자 로마 숫자 lower-latin, lower-alpha 소문자 알파벳 upper-latin, upper-alpha 대문자 알파벳 armenian 아르메니아 숫자 geogian 그루지아 숫자 많은 마크가 있다. 그 중에 쓰고 싶은 것을 쓰면 된다. class로 먼저 만들어서 쓰거나 ul 안에 style태그를 넣어서 쓸수 있다. 하나는 class 로 해보..
웹 페이지를 보면 배경에 그림이 있고 심지어 같이 움직이는 경우가 있는데, css 로 배경 이미지를 만들 수 있다. 이것도 css 기 때문에 class 지정으로 하면 된다. background 관련 문법을 살펴보자 background-color 배경색 지정이다. 배경색은 색을 지정하는 것이므로 글자색 지정하는것과 동일한 방법으로 하면 된다. 색을 어떻게 지정하는지 모르면 다음의 포스팅을 참고하면 좋을 것 같다. https://seong6496.tistory.com/10 [CSS] 글자 꾸미기(color, font) HTML 에서 가장 많이 손을 봐야 하는게 글자의 스타일 변경하는게 아닐까 싶다. 앞서 보았던 선택자 태그 중 classs 태그를 이용해 글자의 색을 지정하고 모양 변경(스타일,굵기)하는 방법..
텍스트를 입력하면 그 텍스트를 어느 쪽으로 정렬할지 글자간격은 좁게할지 넓게 할지 설정을 해야 할 때가 있다. 그런 경우에 사용하는 기능이다. --line-height 행의 높이를 지정하는 line-height 이다. normal(표준) 이나 %나 px 로 지정하게 되는데, %가 아마 가장 편할 것이다. 클래스 설정은 다음과 같다. .mytext{line-height : normal;} 몇 가지 예를 보면 이해가 빠를것이다. 똑같은 문장을 다른 line-height 로 나타냈다 개인적으로는 %가 편하다. normal 은 안 써도 그만 써도 그만이어서 잘 안 쓰게 된다. 따로 설정을 안 하면 normal 이 초기값으로 되므로 쓸일이 사실상 없다. --letter-spacing 이번엔 글자 간격을 지정하는 ..
HTML 에서 가장 많이 손을 봐야 하는게 글자의 스타일 변경하는게 아닐까 싶다. 앞서 보았던 선택자 태그 중 classs 태그를 이용해 글자의 색을 지정하고 모양 변경(스타일,굵기)하는 방법을 보려고 한다. -색 변경하기 먼저 색을 변경하기에 앞서 색을 어떤 방식으로 지정하는지 살펴보자. 색을 지정할 때 기본적으로 빛의 삼원색인 빨강, 녹색, 파랑의 세가지(RGB 값)으로 지정한다. 아래와 같은 서식으로 나타낸다. 색명 red rgb() 와 %값 rgb(100%,0,0) rgb()와 십진수 값 rgb(255,0,0) 0~255 수치로 표현 #와 16진수 값 #ff0000 # 뒤에 6자리 중 1,2번째는 빨강, 3,4 번째는 녹색, 5,6 번째는 파랑. 00~ff의 16진수(256단계)로 표현한다 즉, ..
id, class 태그는 비교가 명확하지 않아 먼저 정리를 한다. 굳이 구분을 짓는다면 id 는 스타일 지정할때 한페이지에 한 가지만 지정 가능한 것이고, class는 스타일 지정할때 여러개 지정가능하다고 보면 된다. 혹시 css를 어떻게 쓰는지 모른다면 아래포스팅을 참조하면 된다. https://seong6496.tistory.com/8 CSS란? CSS CSS(CAscading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치이다. HTML은 틀을 담당하고, CSS 는 장식을 담당한다고 생각하면 된다. 즉,.. seong6496.tistory.com 일단 id 와 class 의 차이를 찾아보자. - id id 같은 경우, 다음과..
CSS CSS(CAscading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치이다. HTML은 틀을 담당하고, CSS 는 장식을 담당한다고 생각하면 된다. 즉, CSS를 활용해서 글꼴,배경색, 너비높이, 테두리 등 여러가지를 지정할수있다. 그래서 그런지, CSS 를 '스타일시트'라고도 부른다. 예전에는 HTML 에서 꾸미는 역할도 담당해서 HTML 문서를 수정할때 일일히 수정해야 하는 번거로움이 있었지만, CSS를 활용해서 틀과 장식부분을 분리해 그런 부담을 줄였다. css 파일에 스타일시트를 다 모아두어서 틀과 장식을 분리해서 활용하면 css 파일을 수정하면 HTML 전체가 수정되는 엄청난 장점이 있다. CSS 작성하는 방법 ..
meta 태그 meta 태그는 메타정보를 지정하기 위한 태그이다. 메타 정보는 화면에는 표시되지 않는 정보라서 웹페이지 상에서 뭘 넣었는지 직접 볼 수는 없지만 HTML 문서의 내용이나 문자 코드, 검색 엔진용 키워드 등을 지정할 수 있다. 메타 정보를 넣을 때는 태그 안에다 넣는다. HTML은 부터 내용을 넣는데, '이 페이지의 정보는 이런 방식으로 넣을거야~' 선언하고 구체적 내용을 쓰는 방식으로 써 내려가도록 해놓은 것 같다. 메타 정보의 종류 -작성자 정보 작성자의 이름을 지정할 때 쓴다. name 에는 author 를 지정하고 content 에는 작성자의 이름을 지정한다 - 검색 엔진에 대한 키워드 지정 name 에 keywrods 를 지정 그리고 content 에는 키워드의 값을 지정한다. -..
폼요소에서 Input 태그 말고 다른 태그들을 살펴보자. - select 태그 select 를 사용하면 여러 개의 선택지에서 선택하는 메뉴를 만들 수 있다. option 태그로 항목을 만들고 선택지를 지정한다. Example) 어떤책을 샀습니까? HTML Python CSS Java 다음과 같은 결과를 얻을 수 있다. 어떤 책을 샀습니까? HTML Python Java CSS - button 태그 button 을 추가할때는 button 태그를 이용할 수 있다. input type='button' 으로 해도 된다. 다만, button type 속성값이 존재하는데 그중에서 submit, reset, button 세개가 주로쓰는 button type 속성값이다. button ,input 으로 작성을 하게 되면..
폼(form) 웹페이지에서 검색을 하거나 ID와 password 입력하는 란을 제공하는데 이렇게 무언가를 입력하게 하는 페이지를 만들기 위해서 폼을 사용한다. 폼에는 데이터를 전송하는 방식이 GET 방식과 POST 방식이 존재한다. GET 방식은 내가 입력한 입력값에 의해 보내진 데이터가 URL의 일부(파라미터)로 주소표시줄에 나타나고, POST 방식은 URL에 보내진 데이터가 표시되지 않는다. 쉽게 말하면, GET 방식은 우리가 네이버나 구글에서 검색할 때를 생각하면 된다. 네이버에 아무거나 검색을 하면 주소표시줄이 변하고, 입력값에 따라 주소는 조금씩 달라진다. 만약 내가 로그인을 했는데 로그인 데이터가 주소표시줄에 나오면 어떻게 될까? 그러면 내 정보에 대한 보안이 굉장히 취약할 수 밖에 없다. 주..
-태그(TAG) 로 만들면 다 태그다 , , 다 태그다 그렇지만 앞글에서 본 것처럼 구조적인 태그로는 웹페이지를 구현할수가 없다 인터넷 들어가서 보면 알겠지만 웹페이지가 단순히 글만 써있는게 아니라는 걸 금방 알 수 있다 글을 쓰면, 문단도 나눠야 하고 그림이 필요하면 그림도 넣어야 하는데, 그 정도는 태그를 이용하면 구현이 가능하다. -기본 태그 자주 쓰는 것들이 유독 있는데, 줄바꿈이나 링크를 건다거나, 글자크기를 바꾼다던가 이런것들이 있다. 태그 기능 작성 표시 하이퍼링크를 추가한다. a href 로 시작하면 된다. 여기서 a는 anchor의 약자이고, href는 HyperText Reference 의 약자. 여기를 클릭 여기를 클릭 ~ 글자크기를 다르게 할 수 있다. 숫자가 작을수록 글자크기가 크..
- HTML5 시작 HTMl 파일을 작성하려면, 윈도우 -- 메모장, 맥 -- 텍스트 편집기 이렇게 운영체제에 있는 기본 프로그램으로 할 수도 있는데, 에디터를 가지고 하는게 여러모로 편하다. 여러가지 언어를 써야해서 Visual Studio 써야겠다 -HTML 구조 HTML 은 구조가 열고 닫는 구조이다. 이게 무슨 뜻인가 하면, 이렇게 열면 로 닫는다 모든 구조가 그렇다 항상 닫을 때는, 로 닫는다 기본 틀은, (html 으로 작성할것이라는 선언!) (html 범위 시작) (body 안에서는 html 문서의 내용 작성) (html 끝!) 간단하다. 사실, Visual Studio 에 파일 만들면 바로 나오는 거다 요렇게 나온다~! - 직접 써보자. 제목 이렇게 쳤다. 그냥 바로 실행 ㅎㅎ 짠~! 브라..