개발나라 스용공주

이번 글은 클래스명을 따로 부여하지 않고 반복되는 태그를 구분할 수 있는가상클래스 nth-child()와 nth-of-type()에 대해 알아보고 이 둘의 차이점에 대한 글이다.  [ nth-child() ]nth-child()란 동일한 태그가 연속될 경우 클래스 부여 없이 각각의 태그들을 구별해 줄 수 있는 수단이다. [ nth-child() 예제 ][ html ]box 아래에 클래스가 지정되지 않은 태그가 4개 있다.  [ css ]클래스 box 아래에 있는 div는 nth-child()를 통해 ()안에 숫자를 넣어 div의 첫번째부터 네번째까지 구별해줄 수 있다..box div:nth-child(1)=> 클래스 box 아래 있는..

이번 글은 애니메이션이 들어간 버튼을 만드는 과정을 설명하는 글이다.   [ html ] 네이버 구글 [ css ]a { padding : 5px; width : 100px; height : 30px; border : 1px solid black; border-radius: 10px; text-align : center; display : inline-block; text-decoration : none; color : black; transition: 0.5s;}a:hover { color : white; background-color: black;} a:hover는 에 해당되는 부분에 마우스가 겹쳐지게 된다면 실행되는 코드다.

이번 글은 float 속성에 대한 이론 설명글이다.  [ float란? ]float 속성이란, 요소가 부모요소 기준으로 왼쪽 또는 오른쪽에 배치하는 것을 지정하는 속성이다.float 속성에는 4가지 종류가 있다.none(default) : float 속성을 적용하지 않음left : 요소가 컨테이너의 왼쪽 배치right : 요소가 컨테이너의 오른쪽 배치margin:auto : 요소를 중앙에 배치아래 사진을 보면서 위의 의미를 이해할 수 있다. 아무것도 적용하지 않았을 때 보통 기본적으로 왼쪽으로 배치가 되는데 그것은 float : left가 아니라 float : none이다.  [ overflow 적용하는 경우 ]아래 예제는 overflow를 적용해야하는 경우의 예제이다.예제 1은 부모 border안에 자..

이번 글은 css를 사용하여 텍스트 요소에 그림자 효과를 줘서 꾸며볼 것이다. 아래 사진과 같이 텍스트 그림자를 두겹 만들어 그림자 레이어가 쌓인 효과를 만드는 실습이다. [ 텍스트 꾸미기 실습 ]먼저 글씨에 폰트를 적용하고 색상을 입혀주었다.@font-face를 사용하여 폰트를 적용하는 방법은 이 글의 맨 아래에 첨부한 블로그 글 링크를 참고하여 만들면 된다. [ html ] 안녕하세요 [ css ]@font-face{ font-family:'bitbit'; src:url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.woff'),url('//cdn.df.nexon.com/img/common/font/DNFBitBit-Regular.wo..

이번 글은 자식선택자와 자손선택자의 차이점에 대한 설명글이다.  [ 자식선택자와 자손선택자 ]아래 코드를 보면 box라는 클래스 밑에 div가 두개 있는 것을 확인할 수 있다.아래 코드의 css부분과 같이 .box div 라고 작성하면 클래스 box 아래에 있는 div가 모두 선택되어(부모 div의 모든 자손이 선택됨) 코드가 실행되고 아래 실행결과 사진과 같이 결과가 출력된다.[ html ]  [ css ].box { border : solid red 2px; width : 600px; height : 200px;}.box div { border : solid green 2px; width : 450px; h..

이번 글은 html 기본구문 단축키에 대한 글이다.  아래 코드를 일일이 쓰지 않아도 아래 영상처럼 단축키를 사용하면 한번에 불러올 수 있다.  [ 방법 1 ]키보드로 !를 쳐주고 enter키를 눌러준다.!  [ 방법 2 ]키보드로 html:5를 쳐주고 enter키를 눌러준다.html:5

이번 글은 @font-face를 적용하는 방법에 대한 글을 작성할 것이다.    [ 1. 웹폰트 가져오기 ]우선 웹폰트는 아래 사진과 같이 '눈누' 사이트에서 원하는 폰트를 선택하고 사진과 같이 '웹폰트로 사용'에서 코드를 긁어서 사용해주면 된다.https://noonnu.cc/ 눈누상업용 무료 한글 폰트 사이트noonnu.cc  [ 2. 웹폰트 적용하기 ]html에서   그리고 에서 해당 폰트를 적용할 부분에 font-family를 사용하여 그 폰트를 아래 코드와 같이 적용해준다.=> font-family : 폰트명;안녕하세요.    [ 3. 실행 결과 ]  [ 4. 전체 코드 ] 안녕하세요.

[ 최종 완성 - 실행 영상 ]    [ 1차 개발 - 기능 구현 ]디자인 ⇨ input 'text'를 통해 추가할 리스트를 작성하는 칸을 만듬 ⇨ input 'checkbox' 등을 통해 리스트 중 완료된 항목에 대해 체크하는 기능을 만듬 ⇨ @font-face를 통해 폰트를 변경해줌 To Do To-Do List Add Do 30 minutes of running Read a book ..