앱 만들기393

• 

  CSS 배경이미지 전체화면이 되도록 설정하기 CSS 백그라운드 이미지 설정하기 CSS로 백그라운드 이미지 즉, HTML 특정요소의 배경 이미지를 설정할 수 있습니다. CSS 백그라운드 이미지 속성은 background-image 입니다. background-image의 예시를 만들어봅니다. Internal CSS 방식으로 결 soo0100.tistory.com 지난 시간 CSS 배경(background)을 설정할 수 있는 background 속성을 알아보았습니다. 주요 속성으로 하기 4가지 속성이 있었습니다. background-image background-position background-repeat background-attachment 오늘은 배경이미지를 브라우저 화면에 꽉 채우는 방법을 알아보겠습니다. 전체화면을 위해서는 containe.. 앱 만들기/CSS study 2023. 7. 11.

• 

  CSS 백그라운드 이미지 설정하기 CSS로 백그라운드 이미지 즉, HTML 특정요소의 배경 이미지를 설정할 수 있습니다. CSS 백그라운드 이미지 속성 과 속성값 설정 방법은 background-image : url("이미지 경로"); 입니다. background-image의 예시를 만들어봅니다. Internal CSS 방식으로 결과는 하기와 같습니다. 기본적으로 배경이미지는 X축과 Y축으로 반복되어져서 그려집니다. background-repeat : no-repeat , repeat-x, repeat-y 반복되지 않고 하나만 그려주기 위해서는 하기 속성을 추가 합니다. background-repeat: no-repeat; 해당 속성값에 의해서 이미지는 하나만 설정이 됩니다. X축과 Y축만 반복되게 이미지를 설정하고 싶을때는 repeat.. 앱 만들기/CSS study 2023. 7. 9.

• 

  CSS 글자 색상 지정하기 CSS에서 가장 많이 사용하는 속성 중 하나가 바로 글자 색상을 지정하는 것입니다. 다양한 글자 색상은 웹페이지의 필수요소 중 하나입니다. 하기와 같은 글자 색상은 어떻게 나타내는 것일까요? 위 예제를 위해서, HTML 웹 문서를 H3 요소와 P 요소로 구성합니다. Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl .. 앱 만들기/CSS study 2023. 7. 8.

• 

  CSS 구문(Syntax) 구조 CSS 구문, CSS 문법은 크게 선택자 와 선언부로 나뉩니다. W3school 에서 제공하는 CSS syntax 를 살펴보면 하기와 같습니다.선택자(Selector) 는 스타일을 적용하고 싶은 HTML 요소를 선택하는 역할을 합니다. 선언부는 속성(Property) 과 Value(값) 으로 구성되며, 선언이 하나이상일때는 세미콜론(;) 으로 구분해줍니다. 선언부는 중괄호{} 내에 기재합니다. p { color: red; text-align: center; }위 CSS 예제에서는 요소 의 글자 색상을 red 그리고 중앙정렬이 되게 스타일 합니다. CSS 를 HTML에 적용하면 하기 오른쪽과 같은 스타일이 적용된 웹문서를 얻을 수 있습니다.CSS Syntax 구조에 대해서 정리해보았습니다. 해당 자료는 W.. 앱 만들기/CSS study 2023. 7. 7.

• 

  CSS 박스모델 예제 CSS 박스모델이란? CSS 박스모델 웹페이지의 컨텐츠를 배치하는데 사용되는 레이아웃 모델 입니다. 조금 더 쉽게 이야기 하자면, 웹 문서의 내용을 박스형태로 각각 정의하는 것을 CSS 박스모델이라고 말합니다. 우 soo0100.tistory.com CSS 박스모델의 앞 포스팅에 말씀드린것처럼, CSS 박스모델은 마진,보더,패딩,컨텐츠 4가지 요소를 가집니다. CSS 박스모델은 모든 HTML 요소를 감싸고 있는 박스 입니다. 그렇기에 CSS 를 어떻게 스타일 하게 만드냐에 따라 동일한 HTML 웹문서도 다르게 보여지게 되는 것이죠. CSS 박스모델 예제를 하기처럼 구성해봅니다. Demonstrating the Box Model This text is the content of the box. We hav.. 앱 만들기/CSS study 2023. 7. 6.

• 

  VSC 한줄복사 단축키 비쥬얼 스튜디오 에서 한줄복사 가 필요할때가 있습니다. 위에서 태그를 복제하기 위해서는 Alt+Shift+ 화살표 업/다운 키를 누르면 됩니다. Alt+Shift+화살표 UP 키는 현재줄의 내용을 위에 줄에 복사하는 것 이고, 화살표 down 은 밑에줄로 현재줄의 내용을 복사하는 것입니다. 하기는, 단축키로 손쉽게 내용을 복사한 결과입니다. 참고로, Ctrl+ C , Ctrl+V 를 통해서도 한줄 복사 붙여넣기가 가능합니다. 다만, 라인을 직접 이동후 복사와 붙여넣기를 해야되는 약간의 불편한점이 있기에 Atl+Shift+화살표 업/다운 키를 사용하는 것이 조금 더 편리합니다. 앱 만들기/비쥬얼스튜디오 코드 2023. 7. 5.

• 

  자바스크립트 HTML 문서 제어하기 HTML 은 정적인 형태의 웹 문서입니다. HTML 태그로만 구성된 웹 문서는 마치 출간된 신문처럼 더 이상 수정이 불가능한 상태입니다. 예를 들어 하기와 같은 문단 만 있는 웹 문서는 항상 해당 내용밖에는 보여줄 수 없습니다. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It .. 앱 만들기/JavaScript study 2023. 7. 4.

• 

  HTML 태그 구조 태그 구조 HTML 은 다음과 같은 일반적인 구조를 가집니다. 내용 입니다 태그의 구조를 세부적으로 살펴보면 하기와 같습니다. : 시작태그 div : 태그 이름 class="note" : 속성 class : 속성 이름 "contens" : 속성 값 내용입니다 : 콘텐츠 : 종료태그 내용 입니다 전체는 html 요소 라고 불리우며, 해당 구문은 div 요소 입니다. 태그와 요소는 엄밀히 말하면 다릅니다. 태그는 등의 태그를 의미하며, 요소는 콘텐츠를 포함한 태그 전체를 뜻합니다. 태그 구조에 대해서 알아보았습니다. 감사합니다. 앱 만들기/HTML5 study 2023. 7. 3.

• 

  CSS box-sizing 이란? box-sizing box-sizing 속성은 박스모델에서 width 크기를 설정할 수 있는 속성 값입니다. 기본값인 content-box 속성이 나타내는 width 크기는 단지 content 크기 입니다. 즉, 패딩과 여백, 마진은 width 값에서 빠져있습니다. content 크기만을 설정할때는 유용한 값이 되겠습니다. border-box 설정은 width 크기가 콘텐츠 크기 + 패딩 + 여백 + 마진 까지 모두 포함하기에 손쉽게 해당 태그요소의 크기를 설정할 수 있다는 장점이 있습니다. 예제를 만들어 봅니다. [HTML] 파일에서는 div 태그 요소 두개를 만듭니다. 박스모델을 설정하기 위함 입니다. div1 div2 [CSS] 파일에서는 box-sizing : border-box 와 기본 설정 타.. 앱 만들기/CSS study 2023. 6. 21.

• 

  CSS 박스모델이란? CSS 박스모델 웹페이지의 컨텐츠를 배치하는데 사용되는 레이아웃 모델 입니다. 조금 더 쉽게 이야기 하자면, 웹 문서의 내용을 박스형태로 각각 정의하는 것을 CSS 박스모델이라고 말합니다. 우리가 평소에 접속하는 웹 사이트들은 박스모델을 사용하여 내용들을 보여주고 있기에 하기 이미지로 손쉽게 이해가 갑니다. 이는 바로 네모난 브라우저안에서 가장 효율적으로 내용을 보여줄 수 있는 방법이기 때문이죠. CSS Box model 을 뜯어보면 4가지로 구성되어 있습니다. Content : 내용 (이미지와 텍스트) 등이 나타나는 콘텐츠 영역 입니다. Padding : 컨텐츠 주변의 여백을 공간 입니다. Border : 패딩과 컨텐츠를 둘러싼 영역입니다. 속성을 주어서 경계부분에 선을 표현할 수 있습니다. Margi.. 앱 만들기/CSS study 2023. 6. 20.