코딩살이

• 

  디자인 레퍼런스 참고하기 좋은 웹사이트 / Portfolio, Design Reference Website / Inspiration, Idea 안녕하세요! 이번에 북마크를 싹~ 정리했는데요 그 중 디자인 레퍼런스 참고하기 좋은 웹사이트를 가져왔어요! 1. 디비컷(DBcut) 디비컷 - 웹디자인 벤치마킹 및 우수 웹사이트 모음 디비컷은 신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자이너 커뮤니티입니다. www.dbcut.com www.dbcut.co.kr ​ 국내 사이트 먼저! 근래에 쭉 그래왔듯이 인터랙션 위주로 화려하거나, 오히려 아예 심플한 게 많이 보여요! ​ ​ ​ 굿디자인웹 국내 최우수 웹디자인 선정, 웹사이트. 굿디자인웹 www.gdweb.co.kr www.gdweb.co.kr 2. 지디웹(GDweb) 요즘 국내 웹사이트 디자인은 어떤 방향인지 궁금하다면 북마크 필수! ​ ​ ​ ​ ​ www.neker.co.kr 네케르 | Th.. 댓글 0 2021.11.10

• 

  CSS 기초 - 구조 의사 클래스(structural pseudo-class) 자주 쓰이는 CSS 구조 의사 클래스 정리 - 헷갈리기 쉬운 CSS 구조 의사 클래스를 알아봅시다! *구조 의사 클래스란? - HTML 계층 구조 안의 특정한 곳에 위치한 요소를 콕 찝어 선택하는 클래스 선택자 :nth-child(N) = 부모태그 아래에 전체 요소 중 N번째 요소 A:nth-of-type(N) = 부모태그 아래에 A태그 중 N번째 요소 :first-child = 부모태그 아래에 모든 요소 중 첫번째 요소 :last-child = 부모태그 아래에 모든 요소 중 마지막 요소 A:first-of-type = 부모태그 아래에 A태그 중 첫번째 요소 A:last-of-type = 부모태그 아래에 A태그 중 마지막 요소 :only-child = 1개만의 자식요소를 가진, 모든 자식요소 :only-.. 댓글 0 2021.09.19

• 

  CSS 기초 - 선택자 우선순위 점수(CSS Property-specificity) CSS 작성시, 같은 요소가 여러번 중복 선언 될 경우에 어떤 CSS속성이 우선 되는지 결정되는 점수이다. 기초적이지만 CSS 작성에 필수인! 선택자 우선순위 점수를 알아보자. 선택자 우선 순위별 점수 아이디 클래스 태그 전체 ID (#) > class (.) > tag > * 100점 10점 1점 0점 !important, inline 선택자 & 우선 순위 선택자 특징 1. !important가 다른 모든 선언보다 가장 우선적용 됨. (중요도 때문) 2. 태그 옆에 직접 기술하는 inline 선언 방식이 두번째로 우선 적용되지만(1000점) inline에 style을 직접 지정하는 것은 유지 보수가 어렵기 때문에 추천하지 않는다. /* inline안에 style 선언 예시(비추천) */ inline 선.. 댓글 0 2021.08.24

• 

  CSS 기초 - CSS작성순서 팁 / 선택자 [attribute] 알아보기 CSS 작성 순서와 간단한 작성 팁을 알아보자. CSS 작성 순서 * CSS는 한꺼번에 하지 않는다. 1. 덩어리부터 선택자 만들기(형제순서 -> 다음 형제순서 중, 가장 첫번째 형제 -> 그 자식 선택자 -> ...) 2. 하나씩 순차적으로 위에서↑ 아래로↓, 밖에서 ↘안으로↙ CSS 하기. 3. 레이아웃 먼저 잡는다. 4. 요소에 font가 있을 땐 font, line height부터 CSS 한다. 선택자 지정 몇 가지 div ul{ } : 하위 선택자 (=띄어쓰기로 다음 선택자 지정) -하위 요소 모두 해당 div>ul{ } : 자식 선택자 - 바로 아래 자식만 해당 h1+ul{ } : - h1 뒤의 ul을 선택 h1~ul{ } : - 내 앞에 h1이 있으면 이후의 ul을 모두 선택 *참고 태그에는.. 댓글 0 2021.08.23

• 

  CSS text-overflow: nowrap, ellipsis (행 나누기, 줄 바꿈 속성 line break) CSS에서 띄어쓰기 및 줄바꿈에 관여하는 text-overflow와 white-space, word-break 태그를 알아보자. white-space : 띄어쓰기 & 줄바꿈 공백 속성값(value): - white-space: normal; (기본값) - white-space: nowrap; - white-space: pre; white-space: normal (지정하지 않았을 때의 기본값) 여러번 띄어쓰기를 하거나 줄바꿈을 해도 1칸(space bar 1회)으로 인식한다. 지정된 넓이 끝에서 자동 줄바꿈 된다. white-space: pre 실제 입력 된 공백과 줄바꿈을 모두 보여 준다. 단, 지정된 넓이를 넘어서도 강제 줄바꿈을 하지 않는다. white-space: nowrap 연속되는 여러 개의 .. 댓글 0 2021.08.23

• 

  CSS 기초 - CSS, html 연결방법(link, import 비교 및 차이점) CSS의 기본 개념과 html에 외부 스타일시트(CSS)를 불러오는 방법을 알아봅시다! * CSS : Cascading Style Sheets의 약자 단계적으로 html요소를 선택해서 꾸미는 역할을 한다. html만 사용해서 웹 페이지를 만들 경우, 태그 하나 하나에 세부 스타일을 지정해야하고, 이후의 유지 보수 또한 힘들고 번거롭다. 때문에 유지보수가 쉽고, 사이트를 일관성 있게 꾸밀 수 있는 CSS를 필수로 이용 함 한다. html 문서에서 분리되어 있는 CSS 외부스타일 시트는 확장자 .css를 사용, 태그를 이용하여 html문서로 불러온다. CSS와 HTML, 연결 방식 3가지 1. embed : - 태그를 이용, css를 처음 접하는 초심자(는 나^^) 는 파일경로 설정하는 게 이해하기 어려울 .. 댓글 0 2021.08.15

• 

  HTML 기초 - 목록 리스트 태그 ul, ol, dl 차이점 (ol>li, ul>li, dl>dt+dd) 목록 리스트 태그 종류인 ul, ol, dl의 특징과 차이점을 알아보자! 목록을 나열하는 리스트 태그(List tag) 종류 1. → ol>li - 순서가 있는 목록 (Ordered List) 2. → ul>li - 순서가 없는 목록(Unordered List) 3. → dl>dt+dd - 용어를 정의하는 목록(Description List 또는 Definition List) 4. 하위태그 - 목록(List Item) 리스트 태그(목록태그)의 특징과 차이점 1. Ordered List : 순서가 있는 부모 ol 의 > 자식 li 1,2,3,4 순서가 있는 나열, 부모 ol 1. 자식 list 2. 자식 list 3. 자식 list 2. Unordered List : 순서가 없는 부모 ul 의 > 자식 l.. 댓글 0 2021.08.15

• 

  자주쓰는 html 태그모음(1) - , , ,