css

이제 우리가 배운것 들로 반응형 웹을 만들어 본다고 한다 이러한 형식의 웹 레이아웃을 만들어 본다고 한다 참고로 나는 인프런의 개발자의 품격 분의 강의를 듣고 내가 정리하며 쓴 블로그인걸 참고하길 바란다 우선 해당 웹의 제일 위의 Who Am I를 만들어 보겠다 Who Am I 태그를 만들고 그안에 태그로 Who Am I 라는 머릿말을 만들고 태그에 클래스 속성을 header 로 줬다 .header { padding: 60px; text-align: center; background-color: #f9fc63; color: black; } 그리고 CSS의 클래스 선택자를 이용해 header 클래스의 디자인을 입히자 그러면 이렇게 얼추 비슷하게 만들어 졌다 * { box-sizing: border-box;..

반응형 웹이란 사용자의 해상도(데스크탑,테블릿,스마트폰)에 따라 레이아웃을 최적화 해서 보여주는 웹을 뜻한다 반응형 웹을 만들수 있게 해주는게 CSS에서는 미디어 쿼리 라는게 있다 일단 미디어컬을 알기전에 뷰포트를 알아야 한다고 한다 우리가 코드를 작성하기 제일 처음 html을 생성을 하면 DOCTYPE html> Document 해당 html코드가 나온다 여기서 해당 코드가 뷰포트 이다 예를 들어 데스크탑에선 콘텐츠가 1500px이였는데 최대 넓이가 700px정도인 모바일로 1500px인 콘텐츠를 보려면 좌우로 스크롤을 해야될 것이다 보통 상하로 스크롤하기 떄문에 좌우로 스크롤이 있으면 엄청 불편할 것 이다 그래서 content="width=device-width content="width=device..

이제 레이아웃을 만들어 본다고 한다일반적인 레이아웃의 형식이다위의 사진은 사용자가 보는 레이아웃 형식이고 위의 사진이 html의 레이아웃 형식이라고 한다 가장 큰 container가 있고 그안에 containerA 그안에 Item A1, A2, A3 그리고 containerB 안에 containerB1,B2 그안에 Item B1-1, B1-2, B1-3 , B2-1, B2-2 이런 식으로 형성된다display 프로퍼티는 내부적인 자식 요소를 어떻게 배치할 것인지 결정할 수 있게 해준다 가로로 배치할 것인지 세로로 배치할 것인지 크기는 얼만큼 할것인지 결정해주는 것이다 그래서 display 프로퍼티를 사용하면 기존 html 요소가 가지고 있는 기본 유형을 상관없이 block 요소와 inline 요소 중 하..

overflow 속성은 html의 자식 요소가 부모 요소보다 크기가 클때 자식 요소를 어떻게 보여줄지를 결정하는 속성이다 이렇게 태그로 높이 200px 넓이 150px인 3px두께의 초록색 직선으로 박스를 만들었다 그리고 태그 안에 자식들을 만들어 보자 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 콘텐츠 이렇게 태그 안에 태그인 자식 요소를 많이 만들면 이렇게 부모인 태그보다 태그의 요소의 크기가 더 커서 박스 밖으로 나와있는걸 볼 수 있다 만약 내가 저 박스안에 콘텐츠를 넣고 싶을때 이럴때 overflow 속성을 사용한다 태그에 overflow-y: scroll; 이라는..

html 요소의 위치에 대해 알아보자 요소의 위치는 position 속성을 사용한다 우리가 이때까지 각종 태그들을 사용하면 이렇게 왼쪽 맨위 부터 채워졌었다 이것은 position:static; 값으로 html 모든 요소의 기본값이다 각종 position 값의 종류는 static, relative, absolute, sticky 가 있다 relative 포지션 태그를 만들어 보겠다 position : relative; 원래 자기 자신이 있어야 하는 위치에서 left: 30px만큼 오프셋 됩니다 이렇게 태그로 머릿말과 태그로 컨텐츠를 만들고 .relative { position: relative; left: 30px; border: 3px solid red; } 이렇게 클래스 선택자로 position 은 ..

border 스타일의 종류를 알아보자 일단 앞에서 내가 배웠던 solid(직선)으로 border를 만들어 보겠다 div { border: 3px solid red; width: 50px; height: 50px; margin: 10px; } 3px 두께의 solid(직선)인 red(빨간색)의 border선이 넓이 50px 높이 50px margin 값은 10px 로 적용해보면 그러면 내가 지정한 값으로 border 가 만들어진걸 볼 수 있다 border: 3px solid red; 이 border란 속성을 세분화 하면 /* border: border-width, border-style, border-color */ 이 순서대로 세분화가 되어있다 border-width: 3px; border-style: ..

나는 이때까지 background-color : 로 배경색을 입혔었다 /* 배경 색 */ div { background-color: aqua; } 아쿠아 색 배경 이제는 배경 이미지를 넣어보자 내가 그림판으로 대충 아무런 이미지를 만들었다 이 이미지 파일을 가지고 background-img 속성으로 적용해보자 /* 배경 이미지 */ body { background-image: url(./img/backcolor.png); } 이렇게 url속성으로 경로를 지정해 줬다 이렇게 하나의 이미지가 가로 세로 반복되서 나오는걸 볼 수 있다 만약 내가 이 이미지를 가로로만 백그라운드에 적용하고 싶으면 /* 배경 이미지 */ body { background-image: url(./img/backcolor.png); b..

css 박스 모델 태그를 두개 만들어 각각 다른 색상과 다른 두께를 적용시켰다 그러면 이렇게 10px인 초록색 border(테두리,경계선) 와 5px 인 빨간색 border(테두리,경계선) 가 그려지는걸 볼 수 있다 여기서 padding 속성을 더 입혀보자 css 박스 모델 각각 10px, 5px값을 적용시켰다 그러면 이렇게 나오는 걸 볼 수 있다 이렇게 노란색 줄로 표시된 곳이 padding 박스(공간) 이다 여기서 margin 속성을 더 입혀보자 css 박스 모델 이렇게 옅은 보라색으로 표시된 곳이 margin 이다 padding 은 안쪽 margin은 바깥쪽 이라고 이해하면 편할듯 하다 해당 태그의 padding: 10px 이란 속성은 이라는 뜻과 같다 만약 내가 padding 사이즈를 조절하고 싶..