본문 바로가기
반응형

분류 전체보기166

문자 관련 스타일 문자 관련 스타일 font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분합니다. 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. 사용 예시 font-family: '돋움', Dotum, Arial, Helvetica, sans-self; font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위들이 있습니다. 종류 단위 설명 px · 해상도에 따라 상대적으로 달라지는 기본 단위입니다. % · 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위입니다. · 특별한 설정이 없다면 16px이 100%가 되므로, 150.. 2023. 3. 1.
레이아웃 - grid 유형 레이아웃 - grid 유형 grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이아웃을 먼저 스케치하고 그것을 위해 필요한 속성을 추가는 방식입니다. 이제 flex유형을 사용해서 예시를 만들어 보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. grid 유형은 각 구역마다 주어야하기 때문에 모든 구역을 나눕니다. 테이블(표)처럼 가로, 세로가 몇 칸인지 확인 후 구역을 나누어줍니다. header 구역, nav 구역, aisde 구역, article1 구역, article2 구역, article3 구역, footer 구역을 만.. 2023. 3. 1.
레이아웃 - flex 유형 레이아웃 - flex 유형 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하는 레이아웃을 잡는 것이다. display: flex;​ 위의 구문을 사용해서 해당 요소에 flex로 레이아웃을 설계한다고 선언하면 됩니다. flex 유형은 부모의 자식에만 사용할 수 있고 부모의 자식의 자식에는 사용할 수 없으니 참고하세요. 이제 flex유형을 사용해서 예시를 만들어 보겠습니다. 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, main 구역, footer 구역을 만들어줍니다. he.. 2023. 3. 1.
레이아웃 - float 유형 - 반응형 레이아웃 - float 유형 - 반응형 https://dongjin6539.tistory.com/14 앞서 블로그에서 레이아웃 float유형에 대해 알아보았습니다. 지금 블로그에서는 사용자가 모바일을 사용해도 깨지지 않는 반응형에 대해 알아보겠습니다. 그럼 보러 가시죠!!! 예시를 만들어서 작성해보겠습니다!!! 1920px * 1080px의 사이즈에 1200px * 1080px 구역 레이아웃을 만들어 보겠습니다. 작성 방법 전체 구역을 만들어주고 각 구역을 하나씩 만들어 줍니다. header 구역, nav 구역, sectioin 구역, footer 구역을 만들어줍니다. head 태그에 style 태그를 입력해줍니다. 구역을 초기화 시키기 위해 전체 구역 *{ }에 margin: 0;, padding: 0.. 2023. 3. 1.
자바스크립트 함수 마무리 문제 자바스크립트 함수 마무리 문제1, 2 책 : 모던 자바스크립트 프로그래밍의 정석 155, 156페이지 참고 마무리 문제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는0인지 판단해서 알림 창에 보여주는 프로그램을 작성해 보시오. 길라잡이 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt( ) 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt( ) 함수는 NaN을 변환합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. See the Pen Untitled by dongjin6539 (@dongjin6539) on C.. 2023. 2. 28.
데이터 제어하기 데이터 제어하기 자바스크립트에서 데이터를 제어하는 종류에 if문, if문 생략, 삼항 연산자, 다중 if문, 중첩 if문, switch문, while문, do while문, for문, 중첩 for문, continue문, break문이 있습니다. 이제 순서대로 알아보겠습니다. if문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. { if(조건식){ document.write("실행되었습니다.(true)"); // 참 실행 } else { document.write("실행되었습니다.(false)"); // 거짓 실행 }; } 값 : // true : 1, 2, "0", "1", "ABC", [], {}, tru.. 2023. 2. 28.
반응형

티스토리툴바