본문 바로가기

분류 전체보기716

css flex css flex #1 배경 flex는 기본적으로 “여러 태그를 하나로 묶어서 정렬”하는 것이다.javascript를 비롯해 컴퓨터 언어는 “내 눈에 보이는”곳으로 이동할 수 없다.따라서, 중앙에 놓고 싶다면 가로세로, 혹은 세로 가로로 규정을 해줘야한다.  #2 활용display: flex;묶음 설정된 태그들을 수평으로 나열해준다. 자식으로 따라오는 것들을 수직으로 나열하면flex-direction: column; 자식으로 따라오는 것들을 수평으로 나열하려면flex-direction: row; 가운데 수평기준으로 정렬justify-content: center; 가운데 수직기준으로 정렬align-items: center; #3 심화 좀 더 살펴보자면flex-direction, justify-content는.. 2025. 1. 20.
css 기초 #1 기초 "어떤 항목"을 제어해줄지 결정하는 것을 "속성""어떻게" 제어할지 결정 하는 것을 "값"이라고 한다. #2 css 선택자 * - 전체 선택자. - 클래스 선택자# - id 선택자 보통* {}.container {}#userId {}이런식으로 쓰인다. #3 컨셉 css가 적용되는 html은 모두 "박스 형태"로 이루어져 있다.이를 다루기 위해서는 몇가지 개념을 알아야한다. margin - 박스의 바깥 여백border - 박스의 기준이 되는 바깥 테두리padding - 박스의 안쪽 여백contents - 박스의 내용 디자이너와 협업시1) border-boxborder가 고정된다.액자 틀 느낌으로 생각하면된다.액자 틀의 크기는 예를들어 40x50으로 고정 되어있는데, 무언가 크기 변화를 주려고 하.. 2025. 1. 16.
html 기본 요소 **매우중요 #1 block, inline요소 1) block 요소block 요소는div, h1, hr, p태그 등으로 구성되며, 화면을 가로 12분할로 봤을때, 12분할 전체를 차지하는 태그다.따라서, 가로 중에서도 "부분"영역이 아니라, "전체"영역을 담당한다는 점을 유념하자. 2)inlineinline요소는span, input, img, a태그 등으로 구성되며, block과는 다르게, 가로를 12분할로 보더라도, 1칸 부터 12칸까지 조정이 가능하다. #2 종속태그 종속태그의 중요성은 "상호작용"해야지만 "작동한다"라는 점 때문이다.이를테면부모태그 + 자식태그 = 작동 되지만태그 단독 - 작동 되지 않는다.여기에는 select, ol, ul, table등이 있다. 종속태그의 일종으로는 "목록"태그가 있다.li .. 2025. 1. 16.
Javascript 비교 구문 - ==, === 설명, a와 A의 차이 #1 ====는 값이 같으면 같은 값이 되는 것이다.예컨데int타입의 2와 string타입의 “2”도 같다고 나온다. 2 == “2”#2 ======로 3번 비교단위가 나오면, 값 and 타입도 같아야 같은 값이다.이번에는 2 === “2”라고 하면 false가 나오고2 === 2라고 하면 true를 리턴한다.#3 비교1)a는 b보다 작다.Javascript에서는 문자열도 비교 대상이 된다.a보다 큰 것이 b다.b> a 가 되는 것이다.a,b,c 순서의 느낌으로 생각해주면 된다.2)소문자는 대문자보다 크다.A와 a를 비교하면, a가 더 큰 값이 된다. 심지어“a” > “Z”도 true를 리턴한다. 2025. 1. 11.

티스토리툴바