본문 바로가기
HTML/CSS 공부하기 : 테두리 꾸미기 이전에 테두리(border)를 꾸며 보았는데 박스 꾸미는 다른 방법을 알아보자. CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box modelAll HTML elements can be consider.. 2020. 3. 22.
HTML/CSS 공부하기 : border CSS 박스 모델을 공부하면서 border 테두리 부분을 잠깐 썼었다. margin 이나 padding 도 여러가지 방법으로 스타일을 줄 수 있었는데 border도 마찬가지로 다양한 방법으로 스타일을 줄 수 있다. 아래 코드로 실습해보자! 아래 코드에서는 스타일을 전혀 주지 않은 코드. CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, .. 2020. 3. 20.
HTML/CSS 공부하기 : overflow Max-height/Width 를 쓰다보면 내용물이 들어갈 공간이 부족하여 글이 튀어나오게 된다. 이렇게 튀어나온 내용물을 Overflow 기능을 이용해서 처리해줄 수 있다. CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illus.. 2020. 3. 15.
HTML/CSS 공부하기 : Margin Padding 공부하기 링크 https://awesomek.tistory.com/entry/HTMLCSS-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-Padding?category=841354 HTML/CSS 공부하기 : Padding 박스모델를 공부하면서 간단하게 Padding 그리고 margin에 대해서 알아보았다. https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-Box-Model-%EC%9D%98-%EC%9D%B4%ED%95%B4?category.. awesomek.tistory.com 실습은 위 링크에서 사용했던 코드로 진행 CSS Box Model All HTML elements can.. 2020. 3. 12.
HTML/CSS 공부하기 : Padding 박스모델를 공부하면서 간단하게 Padding 그리고 margin에 대해서 알아보았다. https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-Box-Model-%EC%9D%98-%EC%9D%B4%ED%95%B4?category=841354 HTML/CSS 공부하기 : Box Model 의 이해 모든 HTML 요소는 박스형태로 되어있다. 개발자모드(F12)를 누르고 페이지에 마우스를 올리면 박스형태로 되어 있는 것을 볼 수 있다. 사진 2번째것을 보면 개발자모드에서 우측 하단에 다이어그램으로 쉽게 볼 수.. awesomek.tistory.com 실습은 이전에 배웠던 BoxModel 코드로 진행 CSS Box Model All.. 2020. 3. 10.
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.

티스토리툴바