본문 바로가기

분류 전체보기525

calculator 구현과제 #querySelector: JS로 생명력을 부여할수있는 방법 손흥민 연봉 15억 조절했던것 수업내용 기억하기 해당 class를 가지고 올거다. #textContent로 불러온건 모두 String type이다. # buttons.addEventListener('click', function (event) { } addEventListener는 button click하면 function이 실행된다.는 의미이다 # 일단 계산기모양이 0+0=0 이거다 # firstOperend.textContent를 써야 0이 불러와진다.-> 이러면 첫번째0에 숫자가 들어온다. firstOperend.textContent = buttonContent; #operator자리도 operator.textContent = butto.. 2022. 12. 27.
[CSS] Flexbox flexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법 # display: flex는 부모박스요소에 적용해, 자식박스의 방향과 크기를 결정하는 레이아웃 구성방법 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬, 가로로 넓게 공간을 차지한다. 부모요소인 요소에 display: flex; 작성하니 자식요소인 요소들이 왼쪽부터 가로로 정렬된것이다. 즉 Flexbox 속성을 활용하면 요소의 정렬, 차지하는 공간을 설정해줄수있다. 1. flex-direction : 정렬 축 정하기 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지않으면 기본적으로 가로 정렬을 합니다. 2. flex-wrap : 줄 바꿈 설정하기 하.. 2022. 12. 23.
레이아웃 레이아웃: 각각의 요소를 목적에 맞게 배치하는 것 1.와이어프레임 와이어프레임: 웹 또는 애플리케이션을 개발할때 레이아웃의 뼈대를 그리는 단계 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미 와이어프레임의 가장 큰 목적은 화면의 영역을 구분하는일이다! 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아닙니다. #목업 (Mock-up) 대부분의 산업에서 목업은 실물 크기의 모형을 뜻합니다. 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성합니다. 예를 들어, 트윗 작성자, 트윗.. 2022. 12. 23.
[CSS] Selector (기타) #가상클래스 셀렉터 a: link { } //사용자가 방문하지 않은 a요소를 선택한다 a: visited { } // 사용자가 방문한 a요소를 선택한다 hover : 마우스를 요소위에 올렸을때 active: 활성화된(클릭된) 상태일때 focus: 포커스가 들어와있을때 #UI 요소 상태 셀렉터 input:checked + span { } // 체크상태일때 선택한다 input: enabled + span { } //사용가능한 상태일때 선택한다 input: disabled + span { } //사용불가능한 상태일때 선택한다 #구조 가상 클래스 셀렉터 p:first-child { } ul > li:last-child { } ul > li:nth-child(2n) { } section > p:nth-child(.. 2022. 12. 22.

티스토리툴바