thal11 님의 블로그

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

[ flex box ]- 행 또는 열 주축 설정을 해준다.- 웹 요소를 배치 정렬하는 1차원 레이아웃 방식.- display: flex; - flex-container (부모)  ㄴ 레이아웃을 결정할 요소- flex-item (flex-container 안에 있는 박스) (자식) - display: flex;는 컨테이너에 사용한다. ◆ flex 축방식- 주축 가로형- 교차축 세로형- 주축을 변경도 가능  방법은 다양하다. 가장 중요한 것은 기획.코드는 내가 편한 것을 사용하면 된다.  - display: flex; >> 가로로 정렬 (기본 속성)- box 개인의 값을 180으로 설정하여 총 너비가 300px을 넘어간다.- 그러나 box는 display: flex;를 적용한 container의 자식.- 즉..

https://flexboxfroggy.com/#ko Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.com [flex-direction]*reverse: flex-item 순서 정렬*reverse를 사용하면 start 순서와 end 순서가 바뀐다.  ㄴ row → start: 왼쪽, row-reverse → start: 오른쪽row)  한즐, 같이ㅁㅁ - justify-conten: 가로 정렬- align-items: 세로 정렬- flex-grow: 가로 작동 column) 한 줄, 하나 배치ㅁㅁ - justify-conten: 세로 정렬- align-items: 가로 정렬- flex-grow: 세로 작동  https://codepen.io/EO..

[복습]※ Position- static: 기본값- relative: 흐름 제외X- absolute: 흐름 제외  ㄴ 기준값=조상의 position 설정값- fixed: 흐름 제외 - top/left/right/bottom   - .cts .box1  ㄴ 띄어쓰기 필수- 하위에 쓴 것이 더 세다. 따라서 box2가 black이 아닌 white가 적용.- 그러나 자세히 작성할 수록 힘이 더 세다.- body .contents2 .box1- .contents2. box1 >> position: absolute;- .contents2 >> position: relative;- box1을 흐름도에서 빼고 contents2를 기준점으로 하여 cts2의 box2가 위로 올라감- contents2 >> positio..

https://codepen.io/EONJENOG/pen/abgZoZN 텍스트요소 정렬...codepen.io   https://codepen.io/EONJENOG/pen/abgZowm flex 시작...codepen.iohttps://kimhyeji324.tistory.com/244 display: flex 미리보기[ 레이아웃을 구성할 수 있는 속성 값 ] 개요 레이아웃을 구성하는 속성 값 중 우리가 배운 속성값은 block, inline-block 두가지가 있었습니다. block block은 한줄을 모두 차지해야하는 경우에 사용되었kimhyeji324.tistory.com  [flex]- 상위태그에 코드를 적용할 것인지 하위태그에 코드를 적용할 것인지가 가장 중요.- 특정한 태그들을 한 줄에 같이 배..

※ display- none: 화면에 표시 되지 않는다.- flex: 일반적인 박스이긴하나 내부에 있는 자식요소를 아이템으로 배치해서 효율적으로 정렬- grid: 내부에 있는 자식요소를 아이템으로 배치해서 효율적으로 정렬  ㄴ 2차원으로 정렬   ㄴ 예) 3-4 (열은 3개 행은 4개)- inline-flex: 내부 자식요소가 인라인처럼 배치된다.- inline-grid: 내부 자식요소가 인라인처럼 배치된다.   ※ border- 테두리영역- "크기, 종류, 색" 속성을 지정해 줄 수 있다. - 1개: 모두- 2개: 상하 / 좌우- 3개: 상 / 좌,우 / 하- 4개: 상 / 우 / 하 / 좌  ※ 박스모델- 사각형 형태로 태그들이 영역 차지한다. 이를 박스라고 표현한다.- 박스는 너비, 높이 조절 가능..

▶Target- 팝업스토어를 즐겨 찾는 2030  ▶ Pain point- 진행중/ 진행예정인 팝업스토어의 장소, 시간 정보를 찾기 힘들다.- 인기있는 팝업스토어의 경우 대기시간이 길다.- 긴 시간 대기 후 입장했는데 굿즈가 모두 소진된 경험이 있다.  ▶ Needs- 내가 원하는 팝업스토어의 정확한 정보(장소/시간)를 쉽게 알고 싶다.- 대기시간을 줄이고 싶다. 오래 기다리기 싫다.- 원하는 굿즈의 재고 소진 여부를 알고싶다.- 기대와 달라 실망하는 경우를 대비해 정확한 구성(콘텐츠)과 현장 분위기, 공간을 알고싶다.- 팝업스토어 행사장 근처 놀거리/가볼만한 곳이 있는지 알고싶다. - 진행 예정인 팝업스토어의 종류를 알고싶다.- 요즘 뜨는 팝업스토어가 무엇인지 알고싶다.  ▶ 중요기능- 다양한 팝업스토..

[브라우저에서 도형 취급 받는 요소]1. block2. flex- 레이아웃을 구성하는 속성값들은 대부분 브라우저에서 도형취급 받는다. [브라우저에서 텍스트 취급 받는 요소]1. 텍스트2. inline3. inline-block- inline이나 inline-block도 브라우저에서 텍스트 취급 받기 때문에 자간과 행간이 생긴다고 생각하면 쉽다.  ㄴ 실제로 이 여백을 해결하는 font-size: 0;이라는 코드가 존재한다.   ㄴ 요즘에는 inline-block으로 레이아웃을 구성하지 않는다.  ㄴ flex를 보기 전 얼마나 불편한지 체크하고 font속성이 상속된다는 개념 보기 정도로 생각하면 된다. [텍스트 기본 특징]1. 자간2. 행간3. line-height- 텍스트는 기본적으로 가독성이 좋아야 하..