티스토리

ㅁ ㅛ ㄴ ㅏ

검색하기

블로그 홈

ㅁ ㅛ ㄴ ㅏ

2myona.tistory.com/m

놀고, 먹고, 공부하고, 기록합니다

구독자: 0

방명록 방문하기

728x90

반응형

SMALL

주요 글 목록

baseline baeline에 대해 알아보자. baseline은 간단히 말하면, 글자의 밑면이라고 할 수 있다. 수직 정렬을 지정하는 verticla-align css 속성을 여기에 추가해보자. 이 속성은 대부분 이미지와 텍스트를 같은 요소에서 중간으로 배치하기 위해 많이 사용하고 있다. 텍스트 요소에는 line-height 를 주고 img 태그에 vertical-align: top 주고 쓰면 웬만한 경우에서는 원하는 결과를 낸다. vertical-align을 이용해서 baseline에 대해 조금 더 자세히 알아볼 수 있다. vertical-align : top 등등... 이렇게 코드를 작성해주면 작성한 코드에 맞게 정렬이 이루어진다. 공감수 0 댓글수 0 2021. 11. 24.
마우스 오버 버튼 만들기 실습_css https://2myona.tistory.com/220 css_선택자 정리 CSS에서 스타일링 해줄 요소는 '선택자'로 결정한다. 우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴보자! 태그 이름 /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 /* 2myona.tistory.com 마우스 오버에 대한 간단한 설명은 위를 참고 - html 코드 - CSS 코드 이것도 가능하다!' (input -> submit-bin 으로 바꾼 형태) 공감수 0 댓글수 0 2021. 11. 24.
css_선택자 정리 CSS에서 스타일링 해줄 요소는 '선택자'로 결정한다. 우리가 이미 알고 있는 것들부터 시작해서, 또 어떤 선택자들이 있는지 살펴보자! 태그 이름 /* 모든 태그 */ h1 { color: orange; } 클래스/아이디 /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color: blue; } 자식 (children) /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div1 i { color: orange; } 직속 자식 (direct children) /* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 태그 */ ... 공감수 0 댓글수 0 2021. 11. 18.
border 꾸미기_radius, background, shadow Border 모서리 설정 border-radius라는 속성을 사용하면 요소의 모서리를 둥글게 만들 수 있습니다. 더 큰 값을 쓰면 더 둥글게 되는 거죠! %로 써줄 수도 있습니당 예를 들어 50%로 적어주면 동그랗게 border가 설정됩니다! .div1 { border: 1px solid green; border-radius: 5px; margin-bottom: 20px; } .div2 { border: 1px solid green; border-radius: 30px; } 개별 설정 그냥 border-radius 속성을 사용하면 모서리 네 개 모두 똑같이 둥글게 되는데요. 각 모서리를 개별 설정할 수도 있습니다. h1 { border: 1px solid green; border-top-left-radi.. 공감수 0 댓글수 0 2021. 11. 18.
boder(테두리) 설정 다른 속성들과 마찬가지로, 테두리를 설정해주는 방법도 다양하다. 한 줄에 끝내기 가장 일반적인 방법은 border 속성으로 한 줄에 다 쓰는 것 이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생긴다. 값을 쓰는 순서는 굵기, 스타일(실선, 점선 등), 색이다. 명확하게 나누기 다른 방법은 border-style, border-color, border-width 속성을 써서 테두리의 스타일을 하나씩 지정해주는 것 다채로운 테두리 지금까지는 4면의 테두리가 모두 같았는데, 다 다르게 설정해주고 싶으면 이렇게 하면 된다. 테두리 없애기 어떤 요소들(예: 태그)은 기본적으로 테두리가 설정되어 있다. 이런 요소들의 테두리를 없애고 싶으면 직접 border 속성을 설정해주면 되는데. 두 가지 방.. 공감수 0 댓글수 0 2021. 11. 18.
overflow 처리_4가지 옵션(visible, hidden, scroll, auto) overflow에 대해 배워보자. 코드 작성은 이렇게 하면 된다. overflow: ~~ 이 ~~에 들어갈 수 있는 옵션을 총 4가지이다. 옵션 1: visible visible 값을 사용하면 넘쳐나는 내용물이 그대로 보인다. 따로 설정해주지 않으면 이게 기본값! 옵션 2: hidden hidden 값을 사용하면 넘쳐나는 부분을 아예 숨겨줄 수도 있다. 옵션 3: scroll 내용물을 숨겼다가, 사용자가 스크롤을 하면 볼 수 있게 해주는 방법도 있다. 옵션 4: auto scroll과 거의 똑같은데, 한 가지 차이점이 있다. scroll은 항상 스크롤바를 보여주고, auto는 내용물이 넘쳐날 때만 스크롤바를 보여준다. * 참고로 Mac OS에서는 스크롤을 할 때만 스크롤바를 보여주는 경향이 있기 때문에 .. 공감수 0 댓글수 0 2021. 11. 18.
width, height_max, min 설정 = 가로 길이, 세로 길이 텍스트 요소의 가로 길이(width)와 세로 길이(height)를 설정해보자. 이미지 사진의 크기도 똑같이 css에서 설정할 수 있다. 최소, 최대 세로 길이 min-height, max-height로 요소의 최소, 최대 세로 길이를 설정할 수 있다. 공감수 0 댓글수 0 2021. 11. 18.
폰트 종류, Google fonts, Google fonts 적용하기 이 외에도 여러 폰트가 있다. 컴퓨터에 이미 저장되어 있는 폰트 외의 폰트도, 직접 제공해 준 뒤 적용 가능하다. 아래는 폰트를 찾을 수 있는 사이트이다. 구글에서 제공하는 폰트들 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 적용법도 간단히 설명하자면.. 먼저 사이트에 들어가서 원하는 폰트를 찾는다. 그 폰트를 클릭하면 다음과 같은 정보들이 나온다. 사진에서 표시된 저 link를 복사해서 붙여넣어주면 된다. 그리고 밑에 나와 있는 CSS rules를 참고해서 코드를 작성해주면 된다. 이 경우에는 이렇게 작성해주면 될 것이다... 공감수 0 댓글수 0 2021. 11. 16.
line-height line-height를 사용하면 줄간격을 조절할 수 있습니다. 사실 line-height 속성을 '완벽하게' 이해하려면 타이포그래피 지식이 조금 필요한데요. 우선은 아주 간단하게만 설명드리겠습니다. 위 사진에 파란 줄 보이시죠? 이 파란 줄 사이가 실제 내용이 들어가 있는 'content area'(콘텐츠 영역)입니다. font-family와 font-size에 따라서 'content area'가 정해지고, line-height는 'content area'에 영향을 주지 않습니다. line-height를 통해서는 각 줄이 실질적으로 차지하는 공간을 정해줄 수 있습니다. 예를 들어서 99px로 설정하면 'content area'보다 40px이 많기 때문에 위 아래로 20px의 공간이 추가로 생깁니다. 반대.. 공감수 0 댓글수 0 2021. 11. 15.
text-decoration_underline, overline, line-through, none text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있다. Underline underline 값을 사용하면 밑줄이 그어진다. Overline overline 값을 사용하면 글 위에 줄이 그어진다. Line-through line-through 값을 사용하면 줄이 글을 관통한다. None none 값을 사용하면 아무 줄도 없다. 이게 기본 값! 태그와 사용 사실 제가 text-decoration을 가장 많이 사용하는 경우는 텍스트를 꾸미기 위해서가 아니라 꾸밈을 없애기 위해서이다. 태그는 기본적으로 밑줄이 그어져 있는데, 이걸 없애기 위해서 text-decoration: none;을 사용한다. 공감수 0 댓글수 0 2021. 11. 15.
HTML_폰트 굵기 설정, 폰트 크기_px, % 폰트 굵기 폰트 굵기를 설정하기 위해서는 font-weight 속성을 사용하면 된다. 사용법 사용 가능한 값은 얇은 순서로 100, 200, 300, 400, 500, 600, 700, 800, 900이다. 100이 가장 얇고, 900이 가장 굵다는 뜻! 참고로 font-weight: normal;은 font-weight: 400과 똑같고, font-weight: bold;는 font-weight: 700과 똑같다. 주의 사항 150, 230과 같은 값은 사용할 수 없다. 만약 사용한다면 그냥 기본값으로 설정된다. 또 주의할 점이 있다. 폰트나 브라우저에 따라서 지원하는 폰트 굵기 값이 다르다. 어떤 폰트는 100, 400, 700만 지원될 수도 있다는 뜻! 잘 확인하고 사용하시길 바란다. 폰트 크기 공감수 0 댓글수 0 2021. 11. 15.
html color codes_글자색 마음대로 설정하기 🎨 HTML 색상 코드 (html-color.codes) 🎨 HTML Color Codes Hex: RGB: rgb(102,232,232) HSL: hsl(232,232,232) html-color.codes 위 사이트에 들어가서 내가 원하는 글자색을 만들어낼 수 있다. 예를 들어, 이 분홍색을 적용한다고 하자. css에서 색을 표현하는 방식은 크게 3가지이다. 1. 색 이름 : 모든 색이 존재하지는 않지만, 약 140개 정도가 지원된다. 2. rgb 값 : 모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있다. 이 표현 방식이 바로 'RGB' 3. hex 값 (16진법) : HEX 값은 단순히 RGB 값을 16진법으로 표현한 방식이다. 83는 16진법으로 53이고, 2.. 공감수 0 댓글수 0 2021. 11. 14.
html_css_도움 되는 웹 사이트_w3schools_stack overflow https://www.w3schools.com/default.asp W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 사이트에서는 html과 css의 기초적인 지식을 제공한다. html이나 css 태그에 대한 정보도 웬만하면 위 사이트에 모두 나와 있다. 위 사이트에서 직접 찾지 않고 구글링을 할 수도 있다.. 공감수 0 댓글수 0 2021. 11. 14.
class와 id의 차이점 클래스 vs 아이디 클래스와 아이디. 얼핏 보기에는 똑같아 보이는데요. 핵심적인 차이점 몇 가지가 있습니다: 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없습니다. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있습니다!) 공감수 0 댓글수 0 2021. 11. 14.
스타일 적용 방법_<style>태그, style 속성, 외부 css 파일 스타일을 적용하는 방법 HTML 코드에 스타일을 입히는 방법에는 세 가지가 있다. 1. Hello World! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare convallis. Pellentesque ac posuere lectus. In eu ipsum et quam finibus fermentum vitae sit amet magna. 2. style 속성 Hello World! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet lorem sit amet nunc ornare conval.. 공감수 0 댓글수 0 2021. 11. 14.
웹사이트에 링크 추가하기 태그를 이용하면 된다. 이렇게 코드를 작성해주자. 코드를 실행시켜 보면, 이렇게 링크 연결이 웹사이트에 표시된다. 공감수 0 댓글수 0 2021. 11. 12.
옵셔널 태그_<html>,<head>,<body> 태그 이전의 실습에서 작성했던 코드에 세 옵셔널 태그를 추가해보자. https://2myona.tistory.com/199 HTML과 CSS_CSS 기본 문법_VS Code로 실습 해보기 오늘은 이전까지 실습했던 HTML에 추가로 CSS를 배워보자. 간단히 얘기하면, HTML = "내용" CSS = "스타일" 사이트에 CSS 스타일을 입혀주기 위해 태그를 사용할 수 있다. 위의 기본 문법을 참고해서 이 2myona.tistory.com 이 실습에서 사용했던 코드이다. (두번째 코드) 여기에 세 태그를 추가한 모습은 다음과 같다. 태그는 모든 코드를 둘러싼다. 태그는 웹사이트에 표시될 내용만을, 태그는 그 외의 것들을 둘러싼다. 꼭 써야할까? 의견이 분분하나, organize의 목적으로 세 태그를 모두 사용하는.. 공감수 0 댓글수 0 2021. 11. 12.
CSS 기본 속성 정리_스타일링 종류_폰트 크기, 여백, 색, 정렬 일단 CSS 스타일을 입혀주기 위해서는 태그를 사용해야 한다. 이제 기본적으로 스타일링할 수 있는 종류를 알아보자. - 폰트 크기 : px(픽셀)을 가장 많이 사용 - 텍스트 정렬 : 글을 왼쪽, 가운데, 오른쪽으로 정렬 가능 각각 left, center, right 로 써주면 됨 - 여백 : margin 속성 이용 여백의 크기도 px 단위로 설정 여백의 위치는 위, 아래, 왼쪽, 오른쪽 가능 각각 top, bottom, left, right 으로 써주면 됨 - 글씨 색 : color 속성 이용 공감수 0 댓글수 0 2021. 11. 10.
HTML과 CSS_CSS 기본 문법_VS Code로 실습 해보기 오늘은 이전까지 실습했던 HTML에 추가로 CSS를 배워보자. 간단히 얘기하면, HTML = "내용" CSS = "스타일" 사이트에 CSS 스타일을 입혀주기 위해 태그를 사용할 수 있다. 위의 기본 문법을 참고해서 이전의 실습에 스타일링을 추가해보자. CSS 스타일링 종류 https://2myona.tistory.com/200 CSS 기본 속성 정리_스타일링 종류_폰트 크기, 여백, 색, 정렬 일단 CSS 스타일을 입혀주기 위해서는 태그를 사용해야 한다. 이제 기본적으로 스타일링할 수 있는 종류를 알아보자. - 폰트 크기 : px(픽셀)을 가장 많이 사용 - 텍스트 정렬 : 글을 왼쪽, 가운데, 2myona.tistory.com 이전의 실습 참고 https://2myona.tistory.com/181 H.. 공감수 0 댓글수 0 2021. 11. 9.
HTML_한글이 깨지는 현상 방지 우리가 VS Code에서 html 코드를 작성하고, 이를 어떤 브라우저에서 실행하는가에 따라 한글이 깨지는 현상이 발생하기도, 발생하지 않기도 한다. 예를 들어, 크롬에서 실행하면 한글이 깨지는 현상은 발생하지 않는다. 그러나, 한글을 지원하지 않는 사파리에서 실행할 경우 다음과 같이 한글이 깨지는 현상이 발생한다. 이를 방지하려면 어떻게 해야할까? 한줄의 코드를 더 추가해주면 된다. 이전의 코드와 달라진 점이 무엇일까? 이 코드가 추가되었다는 점이다. 이 코드를 추가해줌으로써 한글 깨짐 현상을 방지할 수 있다. 이 코드를 실행해보면 한글깨짐 현상이 발생하지 않고 잘 실행된다. 공감수 0 댓글수 0 2021. 9. 18.
HTML_글씨 굵게 쓰기/날려 쓰기 실제로 해보자. 이전에 썼던 코드에서 조금만 변형을 해보았다. https://2myona.tistory.com/180 HTML_VS Code, Live Server 설치/html 기본 태그 정리/html 코드 작성 Visual Studio Code라는 도구를 사용할 것이다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and.. 2myona.tistory.com 참고. 실행시켜 보자. 이렇게 내가 원한 부분이 굵게, 그리고 기울여져서 나타나 있다. 이 밑은 참고. * Phrase Tag.. 공감수 0 댓글수 0 2021. 9. 14.
HTML_VS Code, Live Server 설치/html 기본 태그 정리/html 코드 작성 Visual Studio Code라는 도구를 사용할 것이다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 위의 주소에서 다운받을 수 있다! VS Code 를 다운받았다면, VS Code 를 실.. 공감수 0 댓글수 0 2021. 9. 14.
# HTTP_요청 (Method) : 클라이언트가 웹서버에게 사용자의 요청의 목적/종류를 알리는 수단 HTTP는 요청 메서드를 정의하여 -> 주어진 리소스에 수행하길 위하는 행동을 나타낸다. 그래서 요청 메서드를 "HTTP 동사"라고 부르기도 한다. GET : 특정 리소스의 표시를 요청 오직 데이터를 받기만 한다. 정보 검색 ex) 게시판 리스트 불러오기 HEAD : GET 메서드의 요청과 동일한 응답을 요구하지만, 응답 본문 포함 X POST : 특정 리소스에 엔티티를 제출할 때 사용 종종 서버 상태의 변화/부작용 일으킴 실행 / 저장 ex) 회원가입 / 로그인 PUT : 목적 리소스의 모든 현재 표시를 요청 patload로 바꿈 ex) 회원정보 전체 수정 DELETE : 특정 리소스를 삭제 ex) 회원정보 삭제 CONNECT : 목적.. 공감수 0 댓글수 0 2021. 2. 11.
# HTTP_완젼 기초 : HTML 문서를 주고 받는 데에 쓰이는 통신 프로토콜(=통신 규약) TCP, UDP 사용하여 통신 80번 포트를 사용 * 통신 프로토콜 (=통신 규약) : 컴퓨터나 원거리 통신 장비 사이에서 메세지를 주고 받는 양식과 규칙의 체계 - HTTP 특징 : 서버, 클라이언트에 의해 메세지가 해석된다. TCP/IP를 이용하는 응용 프로토콜이다. 클라이언트가 이전에 요청했던 내용을 기억하지 않는, 비연결성 프로토콜이다. -> 이 단점을 해결하기 위해 -> Cookie, Session이 등장 -> 비연결성 프로토콜이므로, 요청/ 응답 방식으로 동작한다. HTML 문서만이 HTTP 통신을 위한 유일한 정보문서는 아님 - HTTP 통신 과정 (요청&응답) 1) 클라이언트(=사용자)가 -> 서버에 요청(HTTP re.. 공감수 0 댓글수 0 2021. 2. 11.

728x90

반응형

LIST

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.