본문 바로가기

UI

 (227)
HTML과 JavaScript 차이점 2개 1. 연산 능력이 있다. 2. 상호 작용이 있다. 단 조건이 필요 => 조건1 function (함수) => 조건2 event
[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번에 맞게 조절
[JS]if문 중첩 제거 from zeroCho 중첩 제거 1. if 문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다. 2. 분기점에서 짧은 절차부터 실행하기 if문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다. 4. else 를 제거한다( 이때 중첩 하나가 제거된다.) 출처 https://www.youtube.com/watch?v=NUOPdY14JKo&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=45
[Position]누가 누가 더 높이 올라가나요? HTML은 사실 Ground floor와 1층으로 나눠진다. 간단히 Ground floor는 body tag라고 생각하면 되고 이외 tags들을 1층의 layer가 올라갔다고 생각해보자 CSS는 HTML의 style해 준다. 그중 POSITION은 층(floor), 다시 말해 layer를 통해 높이를 형성한다. 높이 형성은 점수 계산방식으로 사용하면 이해가 조금은 쉽다. POSITION 1. top, right, bottom, left 2. position 속성이 없는 경우 1 번의 value 사용(이동) 불가 3. Position이 absolute, fixed, sticky 일 경우 right, bottom 사용 가능 4. 기준의 속성명 위치에서 대상의 속성명 위치까지의 거리. 층(점수) : HTML ..
[수업1]홈페이지를 만드는 기본 개념 홈페이지라는 것은 결국 나의 피씨(My pc : server)에 있는 내용을 web world(internet)에 올리는 것을 의미한다. FTP File Transfer Protocold의 줄일말로써 내가 할당 받은 hosting (account)에 데이터를 올릴 수 있는 공간. 특징 1) 호스팅 업체마다 'root' 폴더 명칭이 다 다름 ex.html 특징2) root folder 밖에 내용은 web site에 반영 안됨. 번외 index.html로 파일을 만들면 대체적으로 --> main page로 자동 반영. browser는 browse라는 용어로써 뜻은 (가게 안의 물건, 책·신문 등 을) 대강 읽다, 둘러보다 라는 영어뜻을 가지고 있음. web은 책이라는 개념으로 출발한 것으로써 책에서 사용하는..
[JS]변수 이야기 제로조 유트브님의 영상을 정리한 내용입니다. (업데이트 : 20223.09.23) https://www.youtube.com/watch?v=LgYyP1PmKR0 프로그램 정의 뜻 let, var 변수 어떤 관계나 범위 안에서 여러 가지 값으로 변할 수 있는 수. conts 상수 변하지 아니하는 일정한 값을 가진 수나 양. 변수 - 선언, 선언문, 선언과 동시에 초기화 했다. 역할 console.log( ) => 화면에 그리는 역할 >>> undefined 변수 선언문자 'sting' => 값을 돌려주는 역할 >>> 메모리에 저장된 값 반환 > let change = "바꿔 봐"; change = '바꿨다'; < "바꿨다" 이는 let 의 역할 때문에 차이가 난다. let이 없을 ..
[JS] class 상속과 super ※이 자료는 생활코딩 영상을 보고 개인의 생각과 가미하여 작성한 글입니다.(업데이트 : 2023.09.16) 상속 : extends 상속은 새로 만든 class에 extends '기존 class'를 불러는 과정이다. 사용하는 이유는 새로운 method를 추가하고 싶은데 활용한다. 물론 기존 class를 수정해도 되지만 1) 내가 접근할 수 없거나, 2) 라이브러리가 업데이트 되면 내가 수정한 코드가 사라질 수 있다. 부모 바라봐 : super super는 코드를 단순화 하기 위한 방법으로 사용되는 함수로써(?) 부모(기존 class)를 불러와 코드를 작성한다. 나아가 나만(새롭게 만든 class) 가지고 있는 method 등을 작성할 수 있게 된다. class PersonPlus extends Perso..
[JS]ES6에 들어간 Class : 이전엔 prototype ES6에 들어간 class 를 확인해 보려고 한다. ※이 자료는 생활코딩의 영상을 보고 개인이 작성한 글입니다.(업데이트 : 2023.09.16) ES6이전와 이후로 코딩 작성 방법을 비교해보면 좋을꺼 같다. ES6 이전 ES6 이후 prototype class ES6 이전 : prototype 역시나 tistoryd에서 제공하는 '코드블럭' 기능이 안되서 사진을 활용하겠다. A : console.log('kim.sum()', kim.sum()); 1. New를 통해 새로운 객체 및 속성값 기본 세팅(name, first, second)을 한다 2. kim.sum을 통해서 sum이라는 method를 호출 한다. 여기 있는 kim object에서 sum이라는 method를 호출할때, 제일 먼저 그 객체 자..
[JS]매개변수와 인수 매개변수(parameter)는 함수 안에서의 정의 및 사용에 나열되어 있는 변수들을 의미 전달 인자(argument)는 함수를 호출할 때 전달되는 실제 값을 의미

티스토리툴바