본문 바로가기
HTML/CSS 공부하기 : Box Model 의 이해 모든 HTML 요소는 박스형태로 되어있다. 개발자모드(F12)를 누르고 페이지에 마우스를 올리면 박스형태로 되어 있는 것을 볼 수 있다. 사진 2번째것을 보면 개발자모드에서 우측 하단에 다이어그램으로 쉽게 볼 수 있다. content 영역 : 280 X 60 은 contents로 내용이 직접 들어가는 공간을 말한다. border(테두리) : 테두리 속성으로 레이아웃 영역에 영향을 미침 padding : border와 content 사이에 있는 사이 여유 공간 Margin : 마진과 다른 요소사이의 간격을 나타낸다. BOX 모델 실습 아래 코드 실습 코드를 실행하게 되면 아래 결과처럼 나온다. CSS Box Model All HTML elements can be considered as boxes. In .. 2020. 3. 9.
JavaScript 공부하기 : 간단한 알림창 띄우기 웹에서 가장 중요한 자바스크립트 정적인 웹사이트는 지루할 수도 있기에 자바스크립트를 이용해서 조금더 웹사이트를 멋있게 만들어주는 역할을 합니다. https://redmonk.com/sogrady/2020/02/28/language-rankings-1-20/?utm_source=rss&utm_medium=rss&utm_campaign=language-rankings-1-20 The RedMonk Programming Language Rankings: January 2020 This iteration of the RedMonk Programming Language Rankings is brought to you by MongoDB. No matter the language, MongoDB helps deve.. 2020. 3. 4.
프로그램 설치 없이 코딩하기(repl.it) 별도의 프로그램을 설치하지 않고 바로 프로그래밍을 사용할 수 있는 서비스를 소개합니다. https://repl.it/ Online IDE, Editor, and Compiler - Fast, Powerful, Free Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS repl.it 회원가입 우선 회원가.. 2020. 3. 4.
HTML 공부하기 : Span 태그 알아보기 아래에 나타나는 글에서 중요부분만 포인트를 주려면 어떻게 할까? 아마 가장 먼저 생각하는 건 Div 태그 일 것이다. 그럼 Div 태그로 한번 구분을 해보자. Div 태그로 구현은 했으나 글자가 구분되는 것을 볼 수 있다. 글이 같이 있어야하지만 Div는 내용물을 단독적인 새로운줄에 나타낸다. 그럼 붙여서 하려면 어떻게 할까? Span tag 사용하기 Div태그를 Span으로 변경해보자 Span 태그와 Div 태그의 공통점은 다른 큰역활없이 요소를 묶어준다. Span 태그와 Div 태그의 가장 큰 차이점은 Div태그는 글을 새로운 줄에 나타내고 Span은 글에 영향을 주지 않고 나눌 수 있다. 사용법 : 위에 실습한 거와 같이 특정 텍스트를 꾸며줄 때 span 태그를 사용한다. 2020. 2. 29.
HTML 공부하기 : 파일 폰트 적용(배달의 민족 폰트) 웹 폰트를 사용해서 적용 https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-Google-%ED%8F%B0%ED%8A%B8-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0?category=841354 HTML 공부하기 : Google 폰트 사용하기 폰트를 사용할 때 설치되어 있는 폰트만 사용하면 제한적이고 페이지가 지루해보일 수도 있다. 그렇기 때문에 인터넷에 있는 폰트를 사용해보려한다. 대표적으로 Google 폰트가 있다. https://fonts.google.com/ G.. awesomek.tistory.com 이번에는 내 PC에 있는 폰트를 사용해서 적용해보려한다. 요즘 무료로 배포하는 배달의 민.. 2020. 2. 27.
HTML 공부하기 : Google 폰트 사용하기 폰트를 사용할 때 설치되어 있는 폰트만 사용하면 제한적이고 페이지가 지루해보일 수도 있다. 그렇기 때문에 인터넷에 있는 폰트를 사용해보려한다. 대표적으로 Google 폰트가 있다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google font 적용하기 구글에서 제공하는 폰트가 엄청나게 많다. 이중에 마음에 드는 폰트가 있다면 옆에 + 버튼을 누르면 된다. 1.가장 이뻐보이는 Lacquer 와 Yeon Sung 폰트를 선택했다. * 선택하면 아래 2Families Selected 라고 보인다. 2. Families Sele.. 2020. 2. 25.
HTML 공부하기 : 텍스트 스타일링(text-align, text-decoration, 폰트크기) text-align 속성 텍스트를 왼쪽, 오른쪽, 가운데로 정렬 text-align : left; 텍스트를 왼쪽 정렬 text-align : center; 텍스트 가운데 정렬 text-align : right; 텍스트 오른쪽 정렬 Text-decoration text-decoration으로 글 아래, 위, 글 관통, 그리고 하이퍼링크에 아랫줄을 없앨 수 있다. text-decoration: underline; : 글 아래 밑줄 text-decoration: overline; : 글 위 줄 생성 text-decoration: line-through : 글 관통 text-decoration: none : 글자 밑에 라인 생성안함 (보통 하이퍼링크를 생성하면 밑줄이 자동으로 생성되는데 none으로 하면 밑줄이.. 2020. 2. 24.
HTML 공부하기 : 텍스트 색깔 지정(htmlcolorcodes.com 활용하기) h1 { color : 색지정; } 보통 우리가 색을 지정할 때 [색지정] 란에 orange, blue, red 간단한 기본 색만 입혀봤었다. 하지만 항상 이렇게 red, blue, orange만 사용할 수 없다. 다양한 색을 입혀보자! https://htmlcolorcodes.com/ HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com 위 사이트에 접속하면 본인이 원하는 색을 찾아 변경할 수 있다. 위에 RGB는 무엇일까? RGB는 빨.. 2020. 2. 24.
HTML 공부하기 : CSS 따로 만들어서 link로 연결 스타일 입히는 방법은 총 3가지로 알고 있다. 1. HTML 에서 사이에 태그를 이용하여 스타일 하는 법 2. 2020. 2. 18.

티스토리툴바