코딩의 즐거움/CSS
-
[ 코딩 ] css background 속성코딩의 즐거움/CSS 2020. 12. 8. 12:00
[ 코딩 ] css background 속성 css background는 배경을 넣어줄 때 사용된다. background-color - 배경색 background-image - 배경 이미지 background-repeat - 배경 이미지 반복 여부 background-position - 배경 이미지 위치 지정 background-size - 배경 이미지 크기 background-attachment - 배경 이미지 스크롤 여부 먼저 실습을 위해서 코드를 작성해주자 h1 태그에 css 너비를 400px, 높이는 300px, 테두리는 2픽셀에 하늘색으로 넣어줬다. 이 상태에서 테두리안에 배경색을 바꿔보자. 배경색 넣기 = background-color : pink; style 태그 안에 background-c..
-
[ 코딩 ] css display 속성코딩의 즐거움/CSS 2020. 12. 5. 03:54
[ 코딩 ] css display 속성 알아보기 태그에 따라서 display 속성이 다르다. 그리고 display 속성에 따라서 화면에 나타나는 모습이 달라진다. display 속성 별 정의 display : none; - 태그가 화면에 보이지 않게 해준다. display : block; - 태그가 블럭형식으로 보여진다. 행단위(가로) 전체를 공간으로 차지하고, 폭과 높이가 있다. display : inline; - 태그가 인라인형식으로 보여진다. 폭과 높이가 없고, 자리만 잡고 있는 상태이다. display : inline-block; - 태그가 인라인블럭형식으로 보여진다. 이름그대로 인라인과 블럭의 성질을 섞어서 가지고 있다. 블럭과 동일하게 폭과 높이는 있지만, 인라인처럼 자리만 잡고 있다. (행단..
-
[ css ] 토글버튼 - 메뉴버튼 클릭 시 메뉴가 나타나게 만들기코딩의 즐거움/CSS 2020. 11. 28. 12:00
[ css ] 토글버튼 - 메뉴버튼 클릭 시 나타나게 만들기_ :checked 우리가 사용하는 스마트폰을 떠올려보면 웹페이지를 이용할 때 세줄로 찍찍찍 그어져 있는 이미지를 누르면 메뉴가 나왔던 걸 떠올릴 수 있다. 화면이 작기 때문에 메뉴를 숨겼다가 토글버튼을 누르면 메뉴가 나오도록 만든 건데, 오늘은 쉽게 토글버튼을 구현하는 방법을 적어보려고 한다. 토글버튼 이미지를 클릭하면 메뉴가 나타나고, 토글버튼 이미지를 다시 한번 클릭하면 사라지게끔. 디자인은 무시하고 html로 텍스트만 채워서 만들어보겠다. html 작성 + 웹페이지 실행 화면 일단 html을 작성하고 저장한 다음 웹페이지를 열어보면 위와 같이 나타난다. 메뉴 라벨 안에 메뉴글씨를 없애고 이미지를 삽입해주면 된다. 끝.
-
[ CSS ] 후손 선택자와 자손 선택자코딩의 즐거움/CSS 2020. 11. 24. 12:00
[ CSS 후손 선택자와 자손 선택자 ] 코드를 작성하다 보면 태그가 태그를 계속 감싸게 된다. 기본 적으로 html 태그 안에 head 들어가 있고 또 head 태그 안에 title 태그가 들어가 있다. 이렇게 안에 들어가 있는 태그를 css에서 디자인 하기 위해서는 태그 안에 태그를 계속 적어주는 방법으로 디자인을 하던지 태그 안에 들어있는 특정한 태그를 콕 찝어서 디자인을 하던지 그것도아니면 id선택자나 class선택자로 이름을 부여해서 디자인을 해줘야 한다. 자손 선택자란? 예를 들기 위해서 p태그 안에 span태그를 입력했다. p태그가 span 태그를 묶어주고 있기 때문에 p태그를 부모 span태그를 자손 (자식과 후손) 이라고 한다. css에서 p 태그의 자손선택자인 span 태그를 디자인 하..
-
[ CSS ] CSS padding 과 margin 적는 순서 + 차이코딩의 즐거움/CSS 2020. 11. 10. 11:22
[ CSS ] CSS padding과 margin 적는 순서 + 차이점 padding 과 margin 은 적는 순서가 동일하다. 첫번째 하나씩 적기. 위 : padding-top: 값 ; 아래 : padding-bottom : 값 ; 왼쪽 : padding-left : 값 ; 오른쪽 : padding-right : 값 ; 위 : margin-top: 값; 아래 : margin-bottom : 값 ; 왼쪽 : margin-left : 값 ; 오른쪽 : margin-right : 값 ; 하나씩 적는 방법은 굉장히 쉽다. 한글을 영단어로 바꾸면 된다. 어느 한 부분에만 값을 줘야하는 경우에 사용하기 좋다. padding 과 margin의 적는 순서를 비교해보면, 동일한 걸 볼 수 있다. 두번째 위=아래=왼쪽=..
-
[ CSS ] CSS 처음 시작하기_CSS 작성 방법코딩의 즐거움/CSS 2020. 11. 9. 23:22
[ CSS ] CSS 처음 시작하기_CSS 작성방법 html은 텍스트 css 디자인 이렇게 머릿속에 입력해 두면 구분하기 편하다. html에 전달하고자 하는 내용을 적어주고, css로 꾸며주면 된다. 우선 CSS 코드 작성 방법부터 알아보자. 선택자 { 속성 : 값; } CSS를 구성하고 있는 문법이다. 선택자를 적고 { } 안에다가 주고싶은 속성에과 값을 부여하고 ; 로 막아주면 HTML에 적용이 된다. 아래는 작성예이다. html body태그 안에 제목태그인 h1에 안녕하세요. 라는 글자를 적었다. h1(선택자) { width(속성) : 100px(값) ; } -> h1 제목 태그에 width 너비를 100px만큼 주겠다는 의미. h1{ height : 100px; } -> h1 제목 태그에 heig..