thal11 님의 블로그

눈누 폰트 적용하기 코드펜

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

G마켓 1차 상단바 구현 코드펜이동          - 글자 커스텀>> 찾아바꾸기 ctrl+H +) span도 마찬가지 Global 우측 아이콘        - 아이콘은 폰트보다 작기 때문에 폰트 사이즈를 생각해서는 안된다.- 최소 두배 - 오른쪽의 여백을 줄이는 방법- 상자의 크기를 제한해도 된다. (over-flow: hidden;)

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

https://codepen.io/EONJENOG/pen/LYKWXaW a태그...codepen.io[앵커태그 a태그]- 앵커 = 닻- 요소를 클릭하면 원하는 경로로 이동할 수 있게 해주는 태그- 그 요소가 url 주소이면 그것을 하이퍼링크라고 부른다.- 기본적으로 target이라는 속성이 있고 우리는 두가지를 사용한다.ㄴ _self(기본값) 내가 보고 있는 페이지가 바뀌면서 이동ㄴ _blank 새 탭이 추가되면서 페이지 이동- 기본 display는 inline- 텍스트를 요소로 사용하면 파란색 글자와 밑줄이 기본적으로 커스텀되어 있다.- nomarlize 처리 후 사용해야 한다.ㄴ a{color: inherit; text-decoration: none;}- 마우스를 올리면 말풍선을 표시할 수 있다.ㄴ ..

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 등 파일을 만들어줘야..

▶ G마켓 1) 라이브러리 등록2) 폰트 가져오기3) 이미지 가져오기 4) 레이아웃 구성 시작- 여백 없애기 위해 nomarlize- font-family 태그에는 후에 다양한 값을 커스텀 할 일이 많다- 따라서 헷갈리지 않도록 nomarlize는 최상단에 따로 빼서 작성한다. - 항상 화면에 구현이 잘 되는지 확인하기 위해 텍스트를 써준다. - 그룹 선택자  - 가로정렬은 jutify-content를 사용할 수 없는 상황- user-menu를 오른쪽 끝에 붙여주기 위해 flex-grow: 1; 코드를 사용- logo-box의 너비값은 고정되어 있다.- menu-box의 경우 너비값을 고정하지 않는다.  ㄴ 텍스트 요소 사이에 여백(padding)이 존재  ㄴ 텍스트가 추가될 때 마다 박스의 너비가 유연..

[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://fonts.google.com/icons Material Symbols and Icons - Google FontsMaterial Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.fonts.google.com  1) 심볼 넣기, 글자 커스텀하기*link는 항상 html 안에 - inline이기 때문에 여백이 생김- 해결하려면 flex-item으로 만들어라- 글자와 아이콘의 line-height가 달라 정렬이 다름- align-items 활용하여 해결해라 - 그래도 해결안되는 묘하게 안맞는 위치는 margin 값으로 해결ㄴ id..

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