thal11 님의 블로그

[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

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

[HTML CSS JS]- 브라우저가 열리면 html과 css가 먼저 > 그 후 JS [div]- 아무 역할도 없음. 아무 공간에 사용. [div태그가 화면에 넓게 나오는 이유]      div는 block 속성을 가진다.따라서 너비를 따로 설정하지 않는다면 기본값인 100%를 가진다.이 때, 100%는 상위태그(body) 너비의 100%를 의미한다.[DOCTYPE 선언 이유]- html 버전마다 구조가 다르기 때문에- 브라우저가 문서를 읽어들일 때 어떤 버전인지 파악하고 그 버전에 따라서 태그를 읽기 위함 [코드펜에 DOCTYPE 선언하지 않는 이유]- 강의나 초보자가 쉽게 사용할 수 있도록 DOCTYPE이 선언된 후 감춰놓았다. [div]- 아무 의미없는 공간에 사용하는 태그이다.- 네이버를 개발자 ..

https://codepen.io/EONJENOG/pen/wvLWrbZ flex-grow ★★★...codepen.io [flex-grow]- container 공간 사용- 여백, 형제 크기 등... 사용하고 남는 공간 차지 ▶ 계산공식flex-container / flex-grow총 값 (= n값)ㄴ 덩어리로 나눈 후 태그 flex-grow 수치값에 따라 배분 예시) flex-grow 배분 예시ㄴ flex-grow 총 값이 4개일 때     : n값 n값 n값 n값      https://codepen.io/EONJENOG/pen/bGPePPp?editors=1100 justify-content 활용해보기...codepen.io https://codepen.io/EONJENOG/pen/KKjMONX?e..