본문 바로가기

전체 글

 (280)
[JS] 대입 연산자의 활용 '지역변수 -> 전역변수' 대입 연산자 += =>함수, for 등 안, 다시 말해 지역변수에 내용을 저장하여 전역변수에서 사용하고 싶을때, 대입 연산자를 활용하여 변수에 저장한다. 1. itemList를 선언 하지 않았을 때 2. itemList를 for { } '안'에 선언 했을 때 3. itemList를 for { } '밖'에 선언 했을 때
[absolute] transform : translate(-50%, -50%)넣는 이유 position: absolute; top: 50% left:50% 하면 부모 중 position:relative가 감싸고 있는 크기의 중앙에 위치 왼쪽 모서리 기준으로 가운데 정렬(장기하의 코가 중심) 이렇게 하면 요소의 중심이 원래 왼쪽 상단 모서리로 효과적으로 이동 왼쪽 모서리 기준으로 가운데 정렬(장기하의 코가 중심) transform : translate(-50%, -50%) 원글 https://stackoverflow.com/questions/46184458/transform-translate-50-50
[CSS] opacity versus background : rgba 차이 -opacity는 적용한 '테그 전체'에 투명도 적용 -background rgba는 '배경만' 투명도 적용
[img]에서 글자와 함께 사용시 1. img 에서 alt="글자 내용" 정리 후 실제 페이지에선 삭제 2. 글자에 감싸고 class="screen_out"으로 숨김 3. 를 활용해서 background에 이미지 넣기 4. pseudo (before or after) 사용해서 background에 이미지 넣기 5. 외부에서 이미지를 불러올 때 사용(외부에서 아이콘 가져올때만 사용 가능)
[absolute]요소레벨 변경 및 상태 absolute를 사용하면 inlin-block 상태가 된다. 만약 width가 없으면 자식의 width와 height가 자기 자신과 동일한 상태가 된다. 1. inlin요소가 inline-block으로 변경되는 순간 중 하나 absolute 2. top, right, bottom and left를 움직어야 그때부터 absolute 적용 3. absolute가 되면 width:0, height:0 인 상태 4. 본인이 absolute인 경우 자식에게 absolute 속성이 inherit 되진 않음. inline요소가 inline-block으로 요소 변경 1) float 2) position : absolute / fixed 3) display : flex / grid => '자식'의 요소 레벨 변경(in..
[GNB]GNB의 nav 만드는 방법 1, 2, 3 GNB의 Nav를 만들때는 1depth와 2depth를 구분해야 한다. 1depth 1. gnb > ul : 영역을 width를 설정 가능 2. gnb > ul > li : 2depth :영역 기준 설정 => position:relative 3. gnb > ul > li >a : Click 영역 기준 설정 (주의 : display:block을 통해서 li 전체 영역으로 click 활성화) 2depth 1. gnb ul li ul : ul이 영역을 가지고 있기 때문에 position :absolute 사용 2. gnb li ul a : Click 영역 기준 설정 (주의 : display: (block을 통해서 li 전체 영역으로 click 활성화 ) Mega Sub menu nav ul { position..
[text-align] <p> 가운데 정렬 비교(수직 정렬) 이 글은 의 가운데 정렬을 하기 위한 비교 페이지 입니다. 는 block 요소 인데 왜 text-align을 사용하는지 이해 못했던 발견을 이곳에 정리합니다. text-align만 tag block이다 보니까 default => width 100% + text-align:center text-align + width tag가 block 이다보니 width를 줬을 때 왼쪽으로 밀림 text-align + width + margin 이제 완성 됐습니다. text-align + width + margin 여기서 text-align이 없으면 안에 item의 정렬이 왼쪽 정렬로 변경됨.
[CSS] align 가운데(수직) 정렬, 세로(수평) 정렬 '가로' 가운데 정렬하는 방법 block block => margin:auto; (width 필수!) inline 요소 요소가 변경되는 경우(inline => inline-block) 1) float 2) display: flex or grid 3) position:absolute or fixed more ul > li로 dropdown을 만들때, li 안에 tag는 display :block 처리를 해줘야 영역 전체 선택이 가능. 왜냐하면 는 inline 요소이기 때문에 width를 가질 수 없음. block and inline-block 비교 block - 블록 레벨 요소는 일반적으로 부모 컨테이너의 전체 너비에 걸쳐 블록 상자 생성 - 그들은 요소 전후에 새 줄을 만들어 후속 요소가 새 줄에 나타남..
[margin]Margin-Top 버그 이슈 margin-top에는 알 수 없는 버그가 있다. 자식에 margin-top을 하면 부모와 함께 같이 밀려나는 현상이다. 기대 child => margin-top 현실 => child:margin-top 현실과 같이 자식(child)은 부모(Parent)와 함께 내려간다. 해결 방법 1) (부모에)float, position 을 적용 => overflow:auto 2) border-top: 1px solid (배경색);을 적용 TIP - margin-bottom을 활용하여 콘텐츠 영역 사이의 간격을 조절 한다. - block 요소 가운데 정렬 + margin-bottom => margin: 0 auto 50px ;
[Swiper]swiper 라이브러시 사용시 시행착오 이제 막 Front-End쪽으로 이동을 하다보니 너무나 당연한 사소한 것들부터 시행착오가 있었다. 그것은 바로 Javascript는 DOM이 완성되어야만 작동한다는 것 DOM => Javascript 실행 가능 상태 if Javascript 가 html에 중간에 있다면 DOM이 완성된 이후에 실행 할 수 있도록 설정을 변경 해줘야 한다. 1) 실행하고 하는 html tags 뒤 2) javascript에 DOM 완성 이후로 code 작성 https://swiperjs.com/get-started#use-swiper-from-cdn
[justify-content]space에 대한 나의 정의 space-around는 item 공간 사이가 불균등 space-evenly는 item 공간 사이가 완전히 균등 *관계는 언제나 상대적일것
[background-image]CSS를 통한 배경 이미지 넣기 w <i> Background image의 경우 배경이기 때문에 width와 height가 존재 하지 않음 따라서. , 등 에 background image를 넣을 경우 display를 통해 inline -> inline-block or block(필요시) 변경 후 width와 height를 적용 필요. CSS로 로고 넣기 1.display 2. background => no-repeat(background image의 경우 default가 반복) 3. width와 height 적용 4. background-size를 통해 3번에 맞게 조절

티스토리툴바