목록프론트엔트 (32)

채니의 개발일기

CSS - 플렉스(정렬): flex container, flex items, justify-content,

flex display: flex;는 CSS의 속성 중 하나로, 요소들을 가로 또는 세로 방향으로 정렬하고 공간 배분을 조정하기 위한 도구 1.Flex Container: Flex Container는 Flexbox 레이아웃을 적용하기 위한 부모 요소입니다. lex Container에 display: flex; 또는 display: inline-flex;를 설정하여 Flexbox 레이아웃을 활성화시킨다. Flex Container에 적용되는 주요 속성: display: flex 또는 inline-flex 값을 사용하여 Flex Container를 정의 flex-direction: Flex Items의 배치 방향을 결정 (row, column, row-reverse, column-reverse 등). jus..
프론트엔트/HTML,CSS 2023. 8. 19. 20:39
CSS- a태그: 링크선택자 밑줄없애기 text-decoration: none

위 선택자 처럼 a태그의 밑줄을 없애주기위해서는 text-decoration: none 코드를 작성할것 a{ text-decoration: none; } 이후 hover를 추가하여 링크선택자임을 알려줄것 마우스로 선택시 색상이 바뀌게 된다 a:hover{ color:#000; }
프론트엔트/HTML,CSS 2023. 8. 19. 15:35
js - 데이터종류(문자열,숫자,배열,undefined,null,object)

문자열 (Strings): 문자열 데이터는 텍스트를 나타내는데 사용된다. 작은따옴표(''), 큰따옴표(""), 또는 백틱(``)으로 감싸진 텍스트가 문자열이다 let singleQuoted = 'Hello, World!'; let doubleQuoted = "JavaScript is fun!"; let templateLiteral = `My name is ${name}.`; ``을 활용하여 `${변수}`를 사용할경우 ->{}에 변수를 넣은 상태로 출력 할 수 있다 숫자 (Numbers): 숫자 데이터는 정수와 소수점 이하의 실수를 포함. 자바스크립트에서 숫자 데이터는 연산을 수행하거나 값을 계산하는 데 사용된다 let integerNumber = 42; let floatNumber = 3.14; 불리언 ..
프론트엔트/javascript 2023. 8. 18. 20:11
js - 변선언,예약어 (let,const, 예약어)

let: 자바스크립트에서 변수를 선언하는 데 사용되는 키워드 *변수는 데이터를 저장하고 나중에 사용하기 위해 필요한 요소 // 변수 선언과 초기화 let age = 30; // 변수 값 변경 age = 31; // 블록 스코프에서의 사용 if (true) { let x = 10; console.log(x); // 출력: 10 } // x는 블록 외부에서는 접근 불가능 console.log(x); // 에러: x is not defined const: 선언된 변수는 상수를 나타내며, 한 번 값이 할당되면 그 값을 변경할 수 없다. = 재할당이 불가하다. const pi = 3.14159; // 상수 선언과 초기화 pi = 3.14; // 오류! 값을 변경할 수 없음 const person = { name:..
프론트엔트/javascript 2023. 8. 18. 19:48
postion을 통해서 수직 가운데 위치하기(top:0, bottom:0, margin:auto 0)

: .box1에 top,bottom에 0을 주고 position:absolute;값을 주면 위치상 부모 요소를 파악하지 못하기때문에 container위에 box1이 위치함을 알 수 있음 : .container에 position:relative;추가 .box1 { width: 100px; height: 100px; background-color: red; position:absolute; top: 0; bottom: 0; margin: auto 0; } hegith값, top:0, bottom:0, margin: auto(top,botoom) 0;으로 지정하면 수직가운데 위치 할 수 있다 번외편: 수평가운데 위치 left:0, right:0;, marging: auto, width 지정하면 수평가운데로 위..
프론트엔트/HTML,CSS 2023. 8. 18. 19:09
CSS - postion 속성

postion CSS의 position 속성은 HTML 요소의 위치를 지정하는 데 사용되는 속성이다. 이 속성을 사용하여 요소를 상대적으로 배치하거나 절대적으로 배치하고, 필요에 따라 다른 요소들과 겹치도록 조정할 수 있다. position 속성값 static: 기본값으로, 요소들은 문서의 일반적인 흐름에 따라 배치. top, right, bottom, left, z-index 속성을 적용x relative: 요소자기자신을 기준 -> 위치상 부모를 relative 속성으로 설정가능 absolute: 위치상 부모요소를 기준으로 배치된다-> 구조상 부모요소 이기때문에 위치상 부모가 누구인지 파악할것 fixed: 요소가 뷰포트(브라우저 창)에 상대적으로 고정되어 스크롤해도 화면에서 사라지지 않는다. stick..
프론트엔트/HTML,CSS 2023. 8. 18. 17:07
이전 Prev 1 2 3 4 5 6 Next 다음