전체 글221 12/23 정리 HTML/CSS 활용 1. 레이아웃(Layout) 와이어프레임(Wireframe) 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 화면의 영역을 구분한 것. 목업(Mock-up) 실물 크기의 모형 의미. 실제 웹페이지가 작동하는 모습과 동일하게 HTML문서를 작성한다. 화면 나누는 방법 수직분할 - contents가 가로로 배치될 수 있도록 한다. 수평분할 - 내부 contents가 세로로 배치될 수 있도록 한다. height속성을 사용하면 좋다. 레이아웃 리셋 HTML의 기본적인 스타일이 있기 때문에 의도한대로 레이아웃을 잡는데 방해가 되기도 한다. 라이브러리를 사용해도 되지만 css로 기본 스타일링을 제거하고 사용해도 된다. * { box-sizing: border-box; } body { marg.. 2022. 12. 23. 12/22 정리 CSS Cascading Style Sheet CSS는 웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. 더 나은 사용자 경험을 제공하기 위해 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 한다. UI(user interface) / UX(user experience) - 개발자는 사용자가 웹페이지를 사용하기 쉽고 접근성이 좋게 만들어야한다. CSS 기본 문법 selector로 선택자를 지정하고 코드 블록 내부에서 style을 정한다. CSS를 적용하는 방식에는 세가지가 있다. ⓵ HTML 파일에 외부 CSS 파일 연결 ⓶ 같은 줄에서 적용하는 인라인 방식 ... ⓷ 별도의 파일을 연결하지 않고 텍스트 꾸미기 - color, background, font-family, font-size, li.. 2022. 12. 22. 9. 타입변환과 단축평가 1. 암묵적 타입 변환 개발자의 의도와 상관없이 표현식을 평가하는 과정에서 JS엔진에 의해 암묵적으로 타입이 자동 변환 ⓵ String으로 변환 0 + '' // "0" NaN + '' // "NaN" Infinity + '' // "Infinity" true + '' // "true" null + '' // "null" ({}) + '' // "[object Object]" Math + '' // "[object Math]" [] + '' // "" [10,20] + '' // "10,20" (function(){}) + '' // "function(){}" (Symbol()) + ''// TypeError: Cannot convert a Symbol value to a string ⓶Number로 변.. 2022. 12. 21. 12/21 정리 HTML/ 동기부여세션 웹페이지를 이루는 3개의 구조 HTML / CSS / JAVASCRIPT HTML - 설계도 그리기(구조) CSS - 재질, 색상 등 꾸미기(스타일) JAVASCRIPT - 특정조건에 따른 동작 만들기 (상호작용) 1. HTML(HyperText Markup Language) 웹페이지의 구조를 다루는 마크업(Mark up) 언어 Tag들의 집합, Tree Structure Tag의 종류는 수십가지가 있으며, 다 외울 필요는 없고 자주 쓰는것만 기억해둘것 - 한줄 전체 차지 - contents 크기만큼 차지 - img삽입 src라는 속성이 있다. - 링크 삽입 href, target이라는 속성이 있다. - , , 리스트만들기 - , 다양한 입력폼 type속성으로 여러가지 형태의 입력폼을 만들 수 있다. -.. 2022. 12. 21. 8. 제어문 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 제어문을 사용하면 코드실행순서를 변화시키기 때문에 가독성을 해치는 단점이 있다. 1. 블록문 0개 이상의 문을 중괄호로 묶은것. 하나의 실행 단위. 일반적으로는 제어문이나 함수를 정의할 때 사용한다. 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 ;를 붙이지 않는다. 2. 조건문 주어진 조건식의 평가 결과에 따라 실행할 코드 블록을 결정한다. 조건식은 Boolean으로 평가되어야 한다. if ~ else if ~ else문 if (조건1) 명령문1 else if (조건2) 명령문2 else if (조건3) 명령문3 ... else 명령문N * 삼항조건연산자( a ? b : c) 는 if else문과.. 2022. 12. 21. 12/20 정리 페어와 문제풀이 오늘은 하루종일 페어와 함께 조건문, 반복문 문제풀이를 진행했다. 1. 조건문 문제 회고 앞쪽은 그냥 평이한 문제였고, advanced문제들이 난이도가 조금 있었다. 6번문제(점수에 따라 등급 매기기)를 우리는 각각의 점수 전부를 if문으로 도배(!)해서 풀었는데 레퍼런스랑 다른분 풀이를 보니 grade(+,-)를 매기는 부분을 따로 빼서 함수로 만들거나 변수에 넣어서 나중에 등급에 붙여서 반환을 하는 방식을 사용하였다. 확실이 코드가 좀 더 깔끔해 보였는데, 이런 방식을 좀더 연습 해 봐야 할거 같다. 2.반복문 문제 회고 반복문 문제에서 계속 막혀서 힘들었다.. 9번 소수 구하기 문제는 어떻게 했는데 10번 소수 출력하기 문제가 매우 힘들었다. 소수가 아닌것을 구해놓고 계속 코드를 적다가 시간을 많이.. 2022. 12. 20. 이전 1 ··· 32 33 34 35 36 37 다음