thal11 님의 블로그

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

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

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

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