thal11 님의 블로그

[피코그램구현]드라이브이동  [가상 요소를 활용하여 중앙정렬하기] https://codepen.io/EONJENOG/pen/poXdgGQ?editors=1100 가상요소...codepen.io - 가상요소를 menu-2에 적용한다.- 가상요소는 자식요소로 작동하기 때문이다.- 요소를 작성하지 않아도 content: ""; 는 꼭 작성해주어야 한다. - menu-2의 앞과 뒤에 로고박스와 유저박스의 너비를 준다. (274px) - 이 때 가상요소는 inline 요소이기 때문에 아주 작게 나온다.- 어차피 menu-2-box 와 정렬해 주어야 하기 때문에 flex-item으로 만들어 준다.- menu-2에 패딩값을 적용해도 유연하게 뚫려있기 때문에 오른쪽 패딩값은 바깥으로 튀어 나간다.  ㄴ box-sizi..

https://codepen.io/EONJENOG/pen/zYVEJbY absolute 부모역할태그...codepen.io[absolute]- 상위태그가 전부 static 상태일 경우 body태그가 부모 역할을 한다.- 가장 가까운 상위태그를 찾아 자식으로 활동한다.- display를 사용할 수 없는 상태가 되고 부모역할은 할 수 있다. [relative]- display를 유지하면서 부모역할을 할 수 있다. [부모역할]- 위치속성 기준선- 너비높이 상속 기준 https://codepen.io/EONJENOG/pen/poXWOmY?editors=1100 hover...codepen.iohttps://codepen.io/EONJENOG/pen/mdZBGZB 마우스를 올리면 형태가 변화하는 absolute...

Position 코드펜이동z-index 코드펜이동 - z-index를 많이 사용하지 않도록 한다.- 만약 10번을 넘어간다면 그 때부터 뭔가 잘못된 것...  ㄴ 처음부터 다시 짜는 게 나음...

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

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

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

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..

1. 그리드 만들기+) padding은 top-bar에  ㄴ 패딩값은 태그 안으로 들어오기 때문에+) 높이값은 container에  ㄴ 높이값을 top-bar에 적용했을 경우 하위 태그인 container에 상속이 안될 수 있기 때문에  2. 박스 만들기+) 메뉴박스는 nav태그 사용 +) 항상 눈에 보이게 형태를 잡아 확인 먼저. 따라서 모든 박스에 border값을 주어 확인. +) flex로 커스텀+) 박스 정렬  3. 로고 넣기 +) 파일 이름은 F2를 눌러 수정 가능 +) 이미지태그를 조정하려면 이미지 박스에 값을 넣어라 (너비)+) 높이값빼야됨  +) 이미지 크기가 이미지 박스 크기를 조정했을 때 상속받을 수 있도록   이미지 중앙정렬    3. 메뉴박스 만들기+) 박스 만들어 요소 넣기+) 정..

https://codepen.io/EONJENOG/pen/dyBOEZY 눈누 한글 웹 폰트 적용하기...codepen.iohttps://codepen.io/EONJENOG/pen/eYwBajo 구글 폰트 적용하기...codepen.io  [폰트 라이센스]- 상업적으로 사용 가능한 지 체크하고 사용해야한다.- 글자깨기가 가능한지, 변형이 가능한지 따로 체크해야한다.  [눈누]- 상업적으로 사용 가능한 폰트들만 모아놓은 페이지- 모든 폰트 순서는 사용자가 많이 사용하는 폰트순대로 정렬되어 있다. 지속적으로 어떤 폰트가 유행하는지 확인해야 한다.  [폰트]- 페이지에 적혀있는 두께만 사용할 수 있다. 예를 들어 300 하나만 있다면 300 하나만 사용 가능하다.- 디자인 하기 전에 폰트 두께 먼저 체크하고 적..

https://codepen.io/EONJENOG/pen/OJeRYxz 이미지 태그...codepen.io  [img태그]- 닫는 태그가 없다.- 기본적으로 src속성과 alt속성이 생성된다.  ㄴ src → 이미지 경로  ㄴ alt → 이미지 설명 (이미지 이름)- 이미지태그는 너비속성과 높이속성으로 사이즈를 조절할 수 있다. [Unsplash] https://unsplash.com/ko- 상업적으로 이용가능한 무료 이미지 사이트  ㄴ 조건: 원본 이미지를 그대로 사용할 수 없고 두장 이상의 이미지를 합성해서 2차 창작물로 만들어 내야 상업적으로 이용 가능하다.  ㄴ 브랜드표시가 있거나 사람 얼굴 인식이 가능한 이미지는 따로 저작권이 있기 때문에 조심해서 사용해야된다. (사람 얼굴은 어떤 사람인지 인식..