본문 바로가기
반응형

FrontEnd

 (65)
#5. CSS에서 색깔을 변수로 사용하는 방법 # 이번 장에서는 CSS에서 색깔을 변수로 사용하는 방법에 대해 알아보도록 하겠습니다. # CSS를 작성하는데 색깔이 많은 부분에서 사용됩니다. 색의 변경이 필요할 때 하나하나 바꾸는 것이 아닌 # 같은 성질을 가진 색끼리 변수로 묶어서 변경할 수 있습니다. # 비전공자가 이해한 CSS CSS :: 색을 변수로 사용하는 방법 1) 기본 문법 변수명은 앞에 "--"를 붙여주고 뒤에 이름을 붙여줍니다. 적용하고 싶은 부분에 "var()" 함수를 놓고 안에 변수명을 입력해줍니다. 2) 사용 예시 # CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference # CSS reference: https://www.w3schools.com/cs..
[첫번째 Project] :: 반응형 Nav Bar 만들기 1. # 오늘은 "반응형 Nav Bar 만들기 1."으로 HTML을 작성하고, CSS를 적용해보도록 하겠습니다. # 중간에 중요한 내용, 필수적으로 짚어야 할 내용이 있는 경우 따로 작성하도록 하겠습니다. # Visual Studio Code 및 Extension 설치 방법 # 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성 - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다. # Full script in Github :: Dony Noh Project GitHub - SudonNoh/Front-end Contribute to SudonNoh/Front-end development by creating an account on GitHub...
VScode(Visual Studio code) 및 Extension 설치 방법 # 프로젝트 진행에 앞서 Visual Studio code 설치와 유용한 Extension 설치를 진행하도록 하겠습니다. # 비전공자가 진행한 PROJECT Visual Studio 설치 1) 설치 아래 링크로 접속해 컴퓨터 사양에 맞는 Visual Studio code를 설치합니다. 설치 방법은 간단합니다. 동의 후 모든 절차를 예로만 입력하시고, 필요한 사항은 체크 후 설치하시면 됩니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and..
#4. CSS FlexBox(Flexible Box module) 사용법 # 일명 flexbox라고 불리는 Flexible box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다. # 이번 장에서는 flexbox의 주요 기능에 대한 내용을 공부해보도록 하겠습니다. # 비전공자가 이해한 CSS Flexbox 일명 flexbox라고 불리는 Flexible Box module은 HTML 내의 아이템 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었습니다. flexbox는 container에 속성값이 존재하고, item들에 각각 속성값을 지정할 수 있습니다. flexbox에는 방향이 존재합니다. main axis(중심축)와 cross axis(반대축) 입니다. cross axis은 mai..
#3. CSS "100%" vs "100vh" 의 차이점 # css를 만들 때 100% 와 100vh 등으로 사이즈를 사용하는 경우가 있습니다. # 이는 반응형 웹을 개발하는데 중요한 부분이기 때문에 짚어보도록 하겠습니다. # 반응형 웹은 tablet, mobile phone, desktop, labtop 등을 구분해 화면을 보여주도록 하는 방법입니다. # 비전공자가 이해한 CSS 100% vs 100vh ! 100%는 부모 태그의 100%를 사용한다는 의미입니다. 만약 부모 태그가 100%가 아니라면 자식 태그를 100%로 설정하더라도 이는 부모 태그 크기의 100%이지 화면의 100%가 아닙니다. 즉, 부모 태그가 화면의 50%라면, 자식 태그를 100%로 설정하더라도 이것은 부모 태그가 지정한 50%를 100% 보여준다는 뜻입니다. 결과적으로 화면의 50..
#2. CSS display 와 position 이해하기 ! # CSS를 활용하는데 가장 중요한 부분은 display와 position 입니다. # content와 box들을 어떻게 배치하고, 보여주는지에 따라 웹 페이지의 가독성이 달라지기 때문입니다. # 같은 content라도 가독성이 좋은 사이트가 더 많은 선택을 받는 것은 당연한 일입니다. # 이번에 배울 내용은 display와 position을 이해해 웹페이지의 가독성을 높이는 방법입니다. # 비전공자가 이해한 CSS 1. Display display 속성에는 inline, inline-block, block 이 세가지 속성값이 존재합니다. 각각 어떻게 다른지 살펴보겠습니다. 1) inline inline은 이미 선헌한 width와 height을 무시하고 content 자체만을 꾸며주는 것을 말합니다. c..
#1. CSS 정의 및 selector 사용법 # CSS의 정의와 selector를 알아보고, 기본적인 css 사용법을 알아보도록 하겠습니다. # CSS: Cascading Style Sheet # 비전공자가 이해한 CSS 1. CSS란 ? CSS는 Cascading Style Sheet의 약어입니다. Markup language가 실제 표시되는 방법을 기술하는 언어로, HTML과 XTML에 주로 쓰입니다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높습니다. 1) Cascading Style Sheet CSS의 "Style Sheet"는 Web Browser에서 사용되는 스타일을 정의한 문서를 이야기합니다. "Cascading"은 사전적으로는 "연속"이라는 의미를 갖고 있습니다. 즉, 세부적으로 정의된 스타일이 있다면 정의된 내용..
#8-3. HTML input 요소 :: 이메일, URL, 전화번호, 검색어 입력 # HTML에서 사용되는 다양한 input 요소들을 살펴봅니다. # 이메일(email), url 주소(url), 전화번호(tel), 검색어(search) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML input 요소 :: 이메일, URL, 전화번호, 검색어 입력 1) 이메일 입력(email) 태그의 type 속성값을 "email"로 설정하면, input요소는 사용자가 email 주소를 입력할 수 있도록 합니다. 브라우저의 지원 여부에 따라 email 주소가 유효한 email 주소인지 자동으로 검사합니다. 2) URL 주소 입력(url) 태그의 type 속성값을 "url"로 설정하면, input요소는 사용자가 URL을 입력할 수 있도록 합니다. 브라우저의 지원 ..
#8-2. HTML input 요소 :: 날짜, 시간 관련 입력 # HTML에서 사용되는 다양한 input 요소들을 살펴봅니다. # 날짜 입력(date), 시간 입력(time), 날짜와 시간 입력(datetime-local), 연도와 월 입력(month), 연도와 주 입력(week) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML input 요소 :: 날짜, 시간 관련 입력 1) 날짜 입력(date) 태그의 type 속성값을 "date"로 설정하면, input요소는 사용자가 날짜를 입력할 수 있도록 합니다. 브라우저의 지원 여부에 따라 날짜를 선택하기 위한 캘린더를 보여줍니다. 2) 시간 입력(time) 태그의 type 속성값을 "time"으로 설정하면, input요소는 사용자가 시간를 입력할 수 있도록 합니다. 브라우저의 ..
#8-1. HTML input 요소 :: 숫자 입력, 입력 범위 지정, 색상 입력 # HTML 에서 사용되는 다양한 input 요소들을 살펴봅니다. # 숫자 입력(number), 입력 범위 지정(range), 색상 입력(color) # tag 목록을 볼 수 있는 페이지로 이동합니다. # 비전공자가 이해한 HTML HTML input 요소 :: 숫자 입력, 입력 범위 지정, 색상 입력 1) 숫자 입력(number) 태그의 type 속성값을 "number"로 설정하면, input요소는 사용자가 숫자를 입력할 수 있도록 합니다. number 타입이 일반 text 타입과 다른 점은 입력 필드 우측에 숫자의 크기를 조절할 수 있는 상하 버튼이 생기는 점입니다. 브라우저의 지원 여부에 따라 min속성과 max속성을 이용하여 숫자 선택에 제한값을 설정할 수도 있습니다. 2) 입력 범위 지정(ran..
반응형

티스토리툴바