본문 바로가기

개발/Web(html_css)10

CSS Box Model 박스 모델이란? HTML의 모든 요소들은 상자로 이루어져 있는데, 이것을 '박스 모델(box-model)'이라고 부릅니다. 박스모델은 margin, padding, border 등의 여러 겹의 박스들로 나뉩니다. 태그내용이 있는 곳이 가장 안쪽, 파랑색인 content입니다. 그리고 이 content를 padding, border, margin으로 마치 박스처럼 감싸고 있어서 "박스 모델"이라 부릅니다. 이렇게만 들으시면 잘 모르시겠죠? 아래에 예시로 content부터 보여드리겠습니다. Content 이 개념에 대해 시각적으로 알기 위해 content 부분에 배경에 색을 입힌 코드를 만들어줍니다. content는 우리가 태그 안에 넣는 텍스트나 이미지 등 박스의 실질적인 내용이 들어간 부분입니다. 우다다.. 2021. 3. 27.
CSS 레이아웃 - Grid, Flex 차이 및기본 개념 웹에는 "웹 레이아웃"이라는 개념이 존재합니다. 우리는 아래 보이는 그림처럼 필요에 따라서 우리만의 레이아웃을 만들어 내용을 배치할 수 있습니다. 레이아웃하면 가장 많이 사용되어지는 것이 Flex,Grid입니다. 둘의 차이는 Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있습니다. 그에 비해 Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있습니다. Grid Grid는 2차원으로 수평 수직을 동시에 영역을 나눌 수 있다고 했죠? 이때 grid-template-columns속성을 이용하여 행을, grid-template-rows속성을 이용하여 열을 바꿀 수 있어요. a a a a get-templates-columns/rows를 줄 때 fr을 이용해서 비율형태로 .. 2021. 3. 27.
CSS - display 속성-block, inline,block-inline CSS에는 display라는 속성이 있습니다. display는 요소가 보여지는 방식을 지정해주는 속성입니다. html요소는 기본적으로 display: block과 display: inline 요소를 가지고 있는데요. 1. display display: none display: block display: inline display: inline-block 공간을 차지않음, 즉 화면에 아무것도 보여지지 않음 한 줄을 다 너비로 차지함 content만큼만 너비를 가짐 content만큼만 너비를 가짐 , ~, 등 , , width, height, margin, padding 가능 width, height, margin-top, margin-bottom 불가능 (속성을 지정해도 무시가 됨) width, heigh.. 2020. 5. 30.
Bootstrap 사용법 & Start bootstrap 템플릿 Bootstrap은 프론트엔드를 위한 웹 프레임워크입니다. 쉽게 말하면 ppt를 만들 때 템플릿과 같은 것들이 모인 곳이라고 보면 되겠네요. 하지만 우리가 템플릿만 쓰면 나만의 느낌을 가진 ppt를 만들지 못하는 것처럼 bootstrap으로만 화면을 꾸미면 그 특유의 느낌이 생깁니다. 누가봐도 bootstrap을 쓴 것 같은 느낌...?ㅎ 그래서 만약 프론트엔드 개발자 쪽을 꿈꾸신다면 부트스트랩을 탈피하여 자신만의 코드를 짜셔야겠지만! 우선 처음하는 개발자들에게 대신 꾸며주는 bootstrap은 가뭄 속의 단비와 같습니다. 자 이제 본격적으로 부트스트랩 이용방법에 대해 말씀드리겠습니다. https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, an.. 2020. 4. 23.
728x90

티스토리툴바