코딩의 즐거움
-
[ 코딩 ] css border 속성코딩의 즐거움/CSS 2020. 12. 14. 12:00
[ 코딩 ] css border 속성 border는 위 이미지에서 파란색 선처럼 테두리를 만들어준다. border는 안쪽 여백인 padding과 바깥쪽 여백인 margin 사이에 위치한다. 위 이미지를 예로 들어보면 가운데서 부터 글자 > padding(안쪽 여백) > border테두리) > margin(바깥쪽 여백) 위 순서를 기억해주면 된다. border를 적어줄 때는 보통 속성을 한꺼번에 적는 방법을 사용한다. border : width(너비) style(선종류) color(색) ; 이렇게 속성을 한꺼번에 적는 방법을 주로 사용한다. width(한칸 띄워쓰기)style(한칸 띄워쓰기)color(한칸 띄워쓰기) 스페이스바를 한번 눌러서 띄어쓴 다음 속성을 적어주면 된다. width는 주로 px을 많이..
-
[ 코딩 ] 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 태그를 디자인 하..
-
[ html ] 전체선택자 * 사용 방법코딩의 즐거움/HTML 2020. 11. 22. 12:00
[ html 전체선택자 * 사용 방법 ] html 에서 기호 * 은 전체선택자로 사용된다. html 내부에 있는 모든 태그를 선택하는 선택자로 css에서 html에 기본적으로 들어가 있는 margin 이나 padding을 없앨 때 자주 사용된다. html 내부에 모든 태그란 예) head, title, body, h1~h6, p 등 말그대로 모든 태그를 뜻한다. * 전체선택자 적용 전의 화면 전체선택자를 적용하기 전에 위와 같이 코드를 작성해서 화면을 열어보았다. 위와 같이 빨간색으로 표시한 부분이 우리가 설정하지 않았는데 기본적으로 들어가있는 margin과 padding 되시겠다. * 전체선택자 적용 후 화면 title 태그 안에 style 태그를 넣어서 전체선택자를 적용한 결과다. 기호 *을 입력해서..
-
[ HTML] id(아이디) 선택자와 class(클래스) 선택자코딩의 즐거움/HTML 2020. 11. 16. 16:24
[ HTML ] id(아이디) 선택자와 class(클래스) 선택자 id 선택자와 class 선택자를 쓰는 이유는 css에서 디자인 할때 내용이 중복되거나(class 선택자 사용) 특정 부분에만 디자인 하고 싶을 때(id 선택자 사용) 이름을 부여해서 디자인을 한다. 여기서 아이디 선택자와 클래스 선택자의 차이는? 아이디 선택자는 동일한 이름을 부여할 수 없고, 하나의 태그에 이름을 정해서 디자인을 할 수 있다. html 표시 : id="이름" / css 표시 : #이름 클래스 선택자는 동일한 이름을 가질 수 있고, 여러 곳에 적용해서 디자인을 할 수 있다. html 표시 : class="이름" / css 표시 : .이름 아이디 선택자 예시 html 입력 : 헤더 태그 안에 아이디 이름으로 main_hea..
-
[ 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의 적는 순서를 비교해보면, 동일한 걸 볼 수 있다. 두번째 위=아래=왼쪽=..