0-0eong_dev_log

0-0eong

기록하는 것을 좋아하는
FE개발자 정준영입니다
🌊🏄🏻‍♂️💙

HTML+CSS div 주의사항

박스를 만들 때 주의사항이 있다. div에 width 속성은 border이나 padding을 고려하지 않은 크기이다. 즉 위 그림에 padding 안쪽 파란색 칸 까지만이 width인 것이다. 때문에 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있다고 한다. 박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성 .box { box-sizing : border-box; /박스의 폭은 border까지 포함입니다/ box-sizing : content-box; /박스의 폭은 padding 안쪽입니다/ } box-sizing이라는 속성을 주게되면 border까지를 실제 박스의 폭으로 설정해준다. CSS 파일 작성시 기본으로 쓰면 좋..

HTML&CSS

HTML+CSS position

위와 같은 레이아웃을 만들어본다고 해보자. 보이는 박스(div)가 몇개인가? 내 눈에 보이는 박스는 5개이다. 제일 아래 박스가 겹쳐지게끔 위로 이동시켜주는 것이 포인트인데 어떻게 div를 내 마음대로 움직이게 할 수 있을까? CSS에는 좌표속성이 있다. .box { top : 20px; left : 30%; } HTML 에서는 위와같이 `top` `left` `right` `bottom`라는 속성을 사용해주면 언제든지 좌표이동을 할 수 있다. 하지만 내 위치가 어디인줄 알고 어떻게 이동하는가? 이동하기 전에는 항상 기준점이 필요하다. .box { position : static; /* 기준이 엄서요 (좌표적용 불가) */ position : relative; /* 기준이 내 원래 위치요 */ posit..

HTML&CSS

HTML+CSS margin bug

.main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed; } background-size는 px, % 단위도 가능하고 cover는 배경으로 꽉채워주세요 contain은 배경이 짤리지 않게 꽉채워주세요 라는 뜻입니다. background-repeat : no-repeat;을 설정해주는 이유는 배경설정을 하고 공간이 남을 경우 해당 이미지로 공간이 차는 부분까지만 채우게 되는데 이러한 반복을 막고자 함이다. margin collapse 버그 두개의 d..

HTML&CSS

HTML+CSS link style

링크 #css .link { text-decoration : none; } .link:visited { color : black; } 링크는 기본적으로 밑줄이 쳐져있고 이것이 싫다면 `text-decoration : none;` 이라는 코드를 써주면 된다. 이외로 링크를 들어가본적이 있을 때 바뀌는 색깔 링크에 마우스를 올렸을 때 색깔 링크에 마우스를 눌렀을 때 색깔 등등 다양한 설정들이 존재한다. 이러한 링크 클릭시 오는 보라색 설정을 없애고 싶다면 ``` a { text-decoration: none; color: black; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:focus { text-decoratio..

HTML&CSS

셀렉터를 사용하여 CSS 코드 줄이기

위와 같은 코드가 있다고 가정해보자. 나는 각각의 태그에 동일한 스타일을 주고 싶다면 어떻게 해야 할까? #css .navbarstyle { .... }위와 같은 코드를 작성할 경우 CSS에 nevbarstyle이라는 또 다른 클래스를 만들어줘야 한다. 과연 이상적인 코드일까? 아래와 같이 해보는 것은 어떨까? #css .navbar li { display : inline-block; }훨씬 보기 좋은 코드가 되었다. 위와 같이 자식 태그에 동일한 스타일을 여러 개 부여하고 싶을 때 셀렉터 라는 것을 활용하면 되는데 방법은 해당 태그에 > 또는 띄어쓰기를 넣어주어 .navbar li 또는 .navbar>li와 같은 코드를 쓸 수 있겠다. (주의) 셀렉터 잘 쓰면 클래스 추가선언 없이도 내가 원하는 요소에..

HTML&CSS

HTML&CSS inline block

가로로 정렬할 떄 쓰이는 것이 float 속성만 있는 것은 아니다. 오늘 소개할 것은 inline-block 속성이다. > #css .left-box { width : 100px; height : 100px; display : inline-block; } .right-box { width : 100px; height : 100px; display : inline-block; }inline-block 속성은 "나의 폭과 높이만큼 공간을 차지한다" 라는 속성이다. 다시 말하면 내가 설정한 크기만큼 공간을 차지한다는 뜻인데. 얼핏 보기에는 이상적이여 보이지만 태그 사이에 공백 또한 화면에 나타내어 코드를 한줄로 길게 써야 하기에 보기 안 좋다. 이러한 이유 때문에 inline-block 보다는 보통 float..

HTML&CSS

사이트 레이아웃 디자인의 제 1원칙 : 모든 요소를 네모박스로 쪼개어 생각하시면 됩니다. 어려워보이는 레이아웃도 개별의 박스(div) 로 생각하면 쉽게 만들 수 있다고 한다 ㅎㅎ 나도 그렇게 생각한다. 호환성 좋은 "float" 속성 우리가 레이아웃을 만들 때는 박스에 크기가 딱딱 들어맞아야 하는데 박스에 크기가 안 맞아서 밀려나는 오류를 쉽게 접하게 된다. 이 때 사용하는 것이 float 속성이다. #css .left-box { width : 100px; height : 100px; float : left; } .right-box { width : 100px; height : 100px; float : left; } (참고) float 속성으로 가로정렬할 때는 위와 같이 float 박스들을 싸매는 하나..

HTML&CSS

웹 레이아웃에 기초는 박스를 만드는 것부터 출발한다. 박스는 태그로 만든다. 박스 디자인(div)에 많이 사용하는 CSS 속성 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; }margin은 바깥 여백 padding은 안쪽 여백 border은 테두리 border-radius는 테두리를 둥글게를 뜻한다. margin 속성은 원하는 방향만 줄 수 있다. top, left, bottom, right 중 원하는 곳에만 여백을 줄 수 있다. display : block이 내장되어있는 div박스 display: block 속성은 가로행을 전부 차지하는 모습을 보여준다. 모든 div, h1, p, li 태그는 위와..

HTML&CSS

HTML what is CSS

CSS란 Cascading Style Sheet의 약자로 Cascading이란 "위에서 아래로 흐르다" 라는 뜻으로 폭포를 연상케 하는 단어인데 왜 이런 이름을 갖게 되었는지 알아보자.😁 HTML은 웹페이지에 자료를 디자인하는 마크업 언어라고 했다. HTML 속 수많은 태그들 안에 일일히 style 속성을 적용해주면 어떻게 될까? 코드가 매우 복잡하고 어수선해질 것이다. 이는 코드에 가속성에 영향을 끼치기에 비효율적이다. 하여 CSS란 HTML 안에 적용하는 style 속성을 따로 모아둔 저장공간이라고 할 수 있겠다. 때문에 HTML 안에 link 태그를 통해 CSS 파일을 다운로드 하는 이유가 여기에 있다. 클래스 .profile { width : 200px; display : block; margin..

HTML&CSS

Prev 1 2 3 4 Next

티스토리툴바