0-0eong_dev_log

0-0eong

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

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

거의 모든 태그는 style = "" 라는 속성을 열 수 있다. 안에 스타일 이름 : 스타일 값 형식으로 스타일을 넣어주면 된다. 여러 개를 넣고 싶다면 , 대신 ; 을 넣어주어 나열시켜주면 된다. 자주 사용하는 글자 스타일들 font-size : 20px; font-family : 'gulim'; color : black; letter-spacing : -1px; text-align : center; font-weight : 600; 이미지 정렬과 폭 조정 display : block; margin-left : auto; margin-right : auto; width : 150px; 이미지는 width를 많이 사용한다 주로 px 혹은 %로 크기를 조정한다. %는 부모태그의 최대 크기에 맞게 계산하는 ..

HTML&CSS

HTML은 로 작성한다. 태그에는 종류가 많다. 글을 작성하고 싶다면 글을 작성할 때 쓰는 태그를 작성하고 이미지를 넣고 싶다면 이미지를 넣을 때 쓰는 태그를 작성해야 한다. 기본적인 태그 목록 글 본문 글 제목 링크 버튼 리스트 리스트입력하세요 규칙 1.태그를 열었다면 으로 닫아줘야 한다. 닫지 않아도 되는 태그가 몇개 존재한다. 태그가 그 중 하나이다. 2.보통의 태그 안에 href="", src=""와 같은 속성을 집어 넣어 추가 정보를 기입할 수 있다. 3.태그 안에 태그를 넣을 수 있다. 4.용도에 맞는 태그를 사용해야 한다. 그 이유는 HTML은 마크업 언어이다. 마크업 언어는 자료의 구조를 쉽게 파악할 수 있어야 한다. 하기에 용도에 맞게 태그를 사용해야 도움이 되고 웹표준에 맞는 웹을 만들..

HTML&CSS

Prev 1 2 3 Next

티스토리툴바