thal11 님의 블로그

Youtube: 몰입코딩 아카이브수업페이지 바로가기 몰입코딩 바로가기코드몽키 바로가기 지디웹: 웹디자인사이트 모음 [선택자]https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.io *: 태그 구분없이 자식이기만 하면 된다. 즉, 전체선택자공백: 후손선택자, 자식선택자. 바로 자식이건 후손이건 section안에 있는 것들 모두.>: section의 자식만.~: 동생선택자.+: 인접동생선택자. only-childㄴ 형제 없는 엘리먼트  div:nth-of-type(1)   // div type 중에서 첫번째div:nth-child(1)   // div type 이면서..

https://codepen.io/EONJENOG/pen/LYKjbMJ 영문폰트와 한글폰트 같이 적용하기...codepen.io  +) 400 --> 본문기본 폰트

눈누 폰트 적용하기 코드펜

[플로우차트]폰트사이즈 16 트리구조  [ul, li 주의사항]- ul과 li는 항상 꼭 같이 사용해야한다.- ul태그 자식으로 li태그만 사용할 수 있다.- ul태그는 기본적으로 margin, padding 값을 가지고 있다.- li태그는 기본적으로 list-style 값을 가지고 있다.

- 웹표준에 맞게, 접근성에 맞게 퍼블리싱 할 것- 화면이 작은 사용자를 위해 그리드에 맞게  - 시험칠 때 주석으로 표시해주기. css도 마찬가지.

https://codepen.io/EONJENOG/pen/poXewpY flex-grow 1:1 안쪽요소 크기 다를 때...codepen.io - 아무리 flex라도 어느정도 너비값을 비슷하게 맞춰주어야 한다.    https://codepen.io/EONJENOG/pen/BagWZGO justify-content: space-between; 예제...codepen.iohttps://codepen.io/EONJENOG/pen/VwJpWJr?editors=1100 flex-direction예제...codepen.io  파일: 확장자가 붙어있는 것들예시) .jpg .png .html .css 폴더: 파일을 정리해주는 역할- vscode에서는 폴더를 먼저 열고 그 안에서 html, css 등 파일을 만들어줘야..

[flex-direction]row) 한줄에 같이 정렬 (기본값)- justify-content 가로 작동- align-items 세로 작동- flex-grow 가로 작동 column) 한줄에 하나씩 정렬- justify-content 세로 작동- align-items 가로 작동- flex-grow 세로 작동 *reverse를 적용하게 되면 start가 오른쪽 정렬으로 바뀌고 end가 왼쪽 정렬으로 바뀐다.또한 flex-item의 순서가 바뀐다는 특징이 있다. https://codepen.io/EONJENOG/pen/wvLgLzj flex-grow...codepen.io [flex-grow] 너비를 설정하는 속성- flex-container 너비를 활용한 속성ㄴ flex-container 안에서만 사용할..

https://codepen.io/EONJENOG/pen/GRbrMvj 앵커태그...codepen.io [앵커태그]- 클릭했을 때 원하는 경로로 이동할 수 있게 해주는 태그- 요소가 있어야 클릭해서 이동할 수 있다.- 기본적으로 herf라는 속성이 생성된다.- 기본적으로 target이라는 속성이 작동되고 있다.  ㄴ기본값: _self(내가 보고있는 페이지가 바뀌면서 경로 이동)  ㄴ _blank(새 탭이 열리면서 경로 이동)- title 속성을 사용할 수 있다.  ㄴ형태) title=""  ㄴ""안에 원하는 문구를 입력해주면 마우스를 올렸을 때 말풍선으로 표시해준다.- 이동할 링크가 정해지지 않았다면 href속성값으로 꼭 #을 작성해줘야 한다.   [none 값]- 없앤다. https://codepen...

https://codepen.io/EONJENOG/pen/wvLgwjP 클래스 선택자 그룹화...codepen.io ***  Test- 공통클래스, 개별클래스 구분 가능한 지   [padding과 margin]- paddingㄴ 태그선을 기준으로 안쪽으로 들어오는 여백ㄴ 태그 너비 높이값에 포함*부모와 자식 관계에서 활용 - marginㄴ 태그선을 기준으로 바깥으로 들어오는 여백ㄴ 태그 너비 높이값에 포함되지 않음*형제관계에서 활용 - gapㄴ flex에서 사용하는 여백값ㄴ 요소와 요소 사이에 들어가는 값ㄴ 왼쪽 오른쪽 구분해서 넣을 수 없고 요소 사이에 한번에 들어감*형제관계에서 활용  https://codepen.io/EONJENOG/pen/WNqReBg padding 과 margin...codepe..

https://codepen.io/EONJENOG/pen/zYVoYwo body 크기와 block 복습...codepen.iohttps://codepen.io/EONJENOG/pen/zYVoYwo body 크기와 block 복습...codepen.iohttps://codepen.io/EONJENOG/pen/wvLovyb 상위태그와 하위태그를 부르는 명칭...codepen.iohttps://codepen.io/EONJENOG/pen/XWLNWyg 선택자가 필요한 이유...codepen.io https://codepen.io/EONJENOG/pen/xxoRxeY 클래스 선택자...codepen.io