날아라김지원
article thumbnail
HTML, CSS 배경관련, margin collapse, position
HTML,CSS 2023. 4. 21. 16:38

- 배경 이미지삽입하기 (background-image) - margin collapse (테두리가 겹쳐질 때 div margin이 합쳐지는 현상) ->하나의 혹은 바깥 div에 padding 1px라도 주면됨 - 박스가 붙어 있을 때도 마찬가지(위아래로) 이럴때는 margin collapse가 합쳐지는게 아니라, 더 큰 margin을 따라가게 된다. (우측 그림처럼) - 배경관련 CSS속성 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed;..

article thumbnail
HTML, CSS 셀렉터, Navbar만들기
HTML,CSS 2023. 4. 21. 16:02

- clear:both 사용팁 float속성때문에 div에서 clear:both를 사용하는경우 빈 div태그를 하나 더만들어서 그곳에 사용해 주는것 이렇게 하면 추후 사용하는 div태그에서 margin을 사용하기 편하다. ...... 블로그 글 블로그 글 내용 본문 ......... - CSS 셀렉터 .클래스명 태그 : 해당 클래스 바로밑에 있는 해당태그 .클래스명>태그 : 해당 클래스 밑에있는 모든 해당태그 .navbar li{ /* 셀렉터 문법 .navbar안에있는 li태그 */ /* >는 안에있는 모든자식 ex)밑에있는 모든 li */ display: inline-block; width: 60px; text-align: center; background: #eee; padding:10px; bord..

article thumbnail
HTML, CSS 기초(간단 프로필제작) p, span, 셀렉터, div, 정렬등..
HTML,CSS 2023. 4. 21. 13:23

이상하리만큼 다시 HTML,CSS 공부를하게되면 내가 작아지는 느낌이든다. 기초라고 생각하지만 늘 잊어먹는 언어들..심기일전 하는 마음으로다시 기초부터 한번싹 공부를 하고 기록해보자. 특히 사소하지만 잊고 있던거, 주요한 내용들 최대한 한번더 봐보도록하자 - HTML은 마크업언어 자료의 구조를 표현하기 위한 언어 안녕하세요2 글자는 p안에 써야한다. - 태그 스타일 1)스타일은 각 태그에 인라인으로 줄 수 있다. 스타일 속성은 매우 다양함 하지만 그때 그때 검색해서 찾아쓰는게 맞다. 김지원 Front-end Developer 태그는 글자안에 쓰는 의미없는태그, inline 속성을 가지고 있다. inline을 가지고 있는 요소는 폭, 높이등을 단독으로 조절할 수 없어서 겉에 태그 등에 주어야 한다. 그리고..

article thumbnail
Margin 간격
HTML,CSS 2022. 3. 23. 17:47

오늘만 margin을사용해서 몇번을 간격조절 했는지 모른다. 빈 div태그를 만들어 className을 주고 마진을 이용 했을정도로 간격을 만들때 중요한 margin... margin은 기본적으로 1)margin : 원하는px 그럼 상하좌우 전부 공백이 늘어난다. 2)margin-left, margin-right, margin-bottom, margin-top 이렇게도 개별 설정할 수 있다. 참고한링크 https://developer.mozilla.org/ko/docs/Web/CSS/margin margin - CSS: Cascading Style Sheets | MDN margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. margin-top, margin-right, margin-b..