본문 바로가기
반응형

전체 글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.
자바스크립트 함수 함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다. 분류 종류 설명 사용자 정의 함수 · 선언적 함수 · 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다. 내장함수 · 인코딩, 디코딩 함수 · 숫자 판별 함수 · 유·무한 값 판별 함수 · 숫자 변환 함수 · 문자 변환 함수 · 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해 주는 함수입니다. 선언적 함수 선언적 함수는 function 키워드를 사용하여 선언되는 함수입니다. 함수 이름을 지정하고 중괄호{ } 안에 함수 코드를 작성하는 방식으로 정의됩니다. 선언적 함수의 형식 function 함수( ){ document.write(값).. 2023. 2. 27.
데이터 저장하기 데이터 저장하기 자바스크립트에서 데이터를 저장하는 종류에는 변수 데이터 저장하기, 상수 데이터 저장하기, 배열 데이터 저장하기, 객체 데이터 저장하기가 있습니다. 먼저 순서 대로 알아보겠습니다. 변수 변수는 데이터를 저장하는 저장소입니다. 변수는 데이터를 저장할 수도 있지만 변경도 가능합니다. 변수는 저장된 기존 데이터에 추가도 가능합니다. 데이터 저장하기 See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen. 데이터 변경하기 See the Pen Untitled by dongjin6539 (@dongjin6539) on CodePen. 데이터 추가하기 See the Pen Untitled by dongjin6539 (@dongjin6539) on.. 2023. 2. 24.
CSS 선택자 CSS 선택자 선택자란 CSS로 UI의 어느 부분을 디자인할지, 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 { } 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 한 줄씩 따로 입력해도 무방합니다. 앞서 다른 블로그에서 id 선택자와 class 선택자에 대해 미리 알아보았습니다. 지금 이 블로그에서는 선택자의 모든 종류에 대해 간략하게 알아보겠습니다 선택자의 종류로는 type 선택자, id 선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택.. 2023. 2. 24.
반응형

티스토리툴바