최근 프로젝트를 진행하면서 정렬할 일들이 많아졌다. 본인은 프론트엔드를 기본적으로 다루는데는 괜찮았지만 세부적인 사항들(배치나 상세한 애니메이션)등에 어려움을 겪었다. 요소에 따라서 배치 방법이 달라지는 것도 어려움에 한몫을 했다. 본인은 주로 bootstrap css 라이브러리를 사용하는데 이번 포스팅에서는 bootstrap 버튼 정렬을 알아볼 것이다 # 오른쪽 정렬 제출하기 float-right 클래스를 부모 요소에 추가하면 된다 # 왼쪽 정렬 제출하기 마찬가지로 float-left 클래스를 부모 요소에 추가시켜주면 된다
안녕하세요 엘빈입니다. 메뉴를 표시하는 네비게이션 바를 작업하던 중 글자에만 링크로 이동되어 전체 영역으로 a 태그 링크 범위를 확대하고 싶었는데요. 검색을 활용하여 방법을 찾아 포스팅으로 정리합니다. 정말 간단합니다. css style 하나만 지정해주면 되죠. 이렇게 빨간 부분 전체를 클릭해도 이동하게끔 만들고 싶었는데 글씨 부분을 눌러야 이동이 가능해지는 현상입니다. 이는 기본적인 a 태그의 범위가 작기 때문인데요. 영역을 넓히기 위해서는 css 속성을 설정해야 합니다. .res-menu-box{ display: block;} 이처럼 display:block 속성을 지정하고 a 태그안에 class 속성값으로 집어넣어줬습니다. 이 현상은 대체로 메뉴를 만드는 경우 li 태그 안에 a 태그를 삽입할 때 ..
안녕하세요 엘빈입니다. 최근 풀스택으로 웹개발을 진행하고 있으면서 프론트엔드 부분도 열심히 공부하게 되는 것 같습니다. 처음에는 백엔드만 공부를 했는데 프론트 엔드의 태그들이나 문법들도 정말 좋은 것들이 많더군요. select 태그 또한 프론트엔드 개발을 시작하면서 알게 되었습니다. 사실 그동안 프론트 부분은 오픈 소스를 가지고 왔기 때문에 볼 일이 없었죠. 이번 포스팅에서는 한 select 태그를 선택하면 다른 select 태그의 옵션들이 보이도록 하는 방법에 대해서 정리해보겠습니다. select 알아보기 select는 기본적으로 아래 코드와 같이 작성합니다. 도/특별시 선택 주소를 선택하세요 서울 경기도 충청남도 주소 소분류 선택해주세요. 먼저 저는 bootstrap을 css library로 즐겨 사..
안녕하세요 엘빈입니다. 이전 포스팅에서는 텍스트 관련 스타일 속성들에 대해서 알아보았는데요. 웹문서에서 텍스트가 모여 하나의 문단을 이룹니다. 여러 개의 문단이 웹 문서 전체를 구성하는 것이죠. 이번 포스팅에서는 문단 스타일에 대해서 알아보겠습니다. direction : 글 발향 지정 #direction {direction: ltr;} 글자 쓰기 방향을 지정하는 속성입니다. Ltr은 왼쪽에서 오른쪽으로 rtl은 오른쪽에서 왼쪽으로 텍스트를 표기합니다. text-align : 텍스트 배치 #align {text-align: center;} 텍스트 정렬 방향을 결정할 수 있는 속성입니다. 자주 사용하는 속성 중 하나이죠. 문서 작업할때 정렬과 동일합니다. 속성 값에 따라서 왼쪽,오른쪽,가운데 정렬 등을 지정..
안녕하세요 엘빈입니다. 웹문서를 구성하는 내용 중 가장 기본이 되는 것은 텍스트인데요. Css에서도 텍스트 스타일과 관련하여 많은 속성들을 제공하고 있습니다. 대표적으로 글꼴, 글자 크기, 굵기 등이 있는데요. 이번 포스팅에서는 기본적으로 사용되는 텍스트 관련 스타일에 대해서 알아보겠습니다. font-family #family{font-family: 굴림, 맑은 고딕, 돋움;} Font-family는 글꼴을 지정하는 속성입니다. 속성값을 지정하는데 주의할 점은 여러 글꼴을 지정하더라도 사용자 시스템에 설치되어 있지 않는다면 화면에 표시할 수 없다는 점입니다. 따라서 위 코드와 같이 여러 개의 글꼴을 한꺼번에 지정합니다. 최우선적으로 굴림 글씨체를 적용하고 글씨체가 없다면 맑은 고딕, 돋움 순서대로 적용합..
이전 포스팅에서 스타일을 적용하는데 가장 중요한 개념인 선택자에 대해서 알아보았는데요. 여기서 한가지 궁금증이 생기실 것입니다. 전체 선택자로 글씨 색깔을 파란색으로 지정하고 p 태그 선택자로 노란색을 지정하면 글씨는 어떤 색상이 적용될까요? 선택자로 스타일을 작성할 때 선택 범주로 겹치는 경우가 많습니다. 이번 포스팅에서는 스타일이 적용되는 css 우선 순위를 알아보겠습니다. Css는 선택자에 따라 우선순위가 존재하며 이에 따라 해당 태그에 우선적으로 스타일이 적용됩니다. 스타일 우선 순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말합니다. 1순위 : 사용자 스타일 시트 사용자 스타일 시트는 저시력자 같이 특별한 환경이 필요한 사용자에 맞게 구성한 스타일 시트를 말합니다. 해당 스타일 시트는..
안녕하세요 엘빈입니다. 저번 포스팅에서는 css 기초적인 내용에 대해서 알아보았는데요. Css를 제대로 활용하려면 선택자,스타일 속성, 속성값 3개를 제대로 알아야 한다고 말했습니다. 이번 포스팅에서는 가장 헷갈리고도 공부할 것이 많은 선택자에 대해서 알아보겠습니다. 가장 많이 사용되는 선택자들부터 알아보고 나중에 포스팅을 통해 다양한 선택자에 대해서 알아보겠습니다. 전체 선택자 * {font-size: 15px;font-family: cursive;} 전체 선택자는 웹문서 전체 모든 요소에 해당 스타일을 적용시킬때 사용합니다. 주로 웹문서에서 가장 기본이 되는 스타일을 지정할 때 사용합니다. 예를 들어 글꼴,사이즈,여백 등이 있습니다. 스타일을 표시하지 않으면 전체 선택자에 표시된 스타일이 자동으로 지..
웹문서는 크게 3가지로 구성되어 있습니다. 기본적인 틀들의 배치와 형태를 결정하는 HTML 태그와 문서의 디자인과 스타일을 결정하는 CSS, 웹문서가 동작할 수 있도록 여러 기능들을 결정하는 JS가 있는데요. 웹프로그래밍을 배울때 이 셋중 하나라도 빠진다면 완전한 웹페이지라고 말할 수 없을 것입니다. 이번 포스팅에서 다룰 것은 CSS가 무엇인지, 기본적으로 어떻게 구성되어 있는지 등의 기초적인 내용입니다. 코드 작성부터 배우는 것보다 기본적으로 배우는 것이 무엇인지를 알아야겠죠? CSS란 무엇일까? Css는 웹문서에 생기를 더해줍니다. Css가 없는 웹 문서는 그저 딱딱한 문서에 불과하죠. 보기 좋은 음식이 먹을때도 좋은 듯이 아무리 훌륭한 내용을 포함한 문서라도 가독성이 떨어지거나 보기에 괴상하면 좋다..
안녕하세요 엘빈입니다. 저번 포스팅에서는 form 구조에 대해서 간략히 알아보았습니다. 이번 포스팅에서는 Form 태그 안에서 대부분이 차지하는 input 태그에 대해서 알아보겠습니다. Input 태그는 입력 형식을 구현하기 위한 태그로 type 유형에 따라 다양하게 화면에 표시할 수 있습니다. 기본 형식은 다음과 같습니다 " " type 은 input 태그를 입력할 때 필수적인 속성입니다. type 값에 따라 input 태그는 다양한 기능과 모습으로 화면에 구현됩니다. id 값은 필수적이진 않지만 꼭 값을 넣도록 요구되는 속성 값입니다. 그 이유는 다른 input 태그와 구별하기 위함과 웹 서버에서 입력 값을 판별하기 위함입니다. 나중에 이에 대해 자세히 포스팅 하겠습니다! 일단 이정도만 알아 두고 t..
안녕하세요 엘빈입니다. 저번 포스팅에서는 링크 관련 태그들을 알아보았습니다. 이번 포스팅에서는 입력을 위한 태그 form에 대해서 알아보겠습니다. 웹에서 form은 자주 사용됩니다. Form이 무엇이냐고요? 로그인 버튼, 회원가입 페이지 등 사용자가 입력을 하는 창을 보신 적이 있을 것입니다. 빈칸의 내용을 입력하고 제출 버튼을 클릭하면 이 입력 내용들은 웹 서버로 보내집니다. 이러한 입력 및 제출과 관련한 기능을 제공하는 태그가 form인 것입니다. form 태그 만들기 Form 태그는 속성을 통해 서버로 어떤 방식으로 넘길 것인지, 어떻게 처리할 것인지를 지정할 수 있습니다. 사용하는 속성은 다음과 같습니다. method 넘겨주는 방식을 지정합니다. (get, post) name 폼의 이름을 지정합니..
안녕하세요 엘빈입니다. 링크는 웹 문서가 다른 일반 문서와 구별되는 가장 큰 특징입니다. 사이트들간의 이동을 생각하시면 쉽습니다. 우리는 해당 사이트의 주소만 알면 웹상에 어디든 이동할 수 있죠. 즉 클릭만 하면 연결된 곳으로 즉시 이동 가능하여 웹 사용을 더욱 편리하게 해줍니다. Html 문서 또한 링크 이동을 위한 태그들을 제공하고 있습니다. 링크 만들기 태그와 href 속성 글씨나 메뉴의 버튼 등을 클릭하면 어딘가로 이동하는 현상을 자주 보았을 것입니다. A 태그는 링크 주소를 통해 해당 주소로 이동할 수 있는 기능을 제공합니다. A 태그에서 사용 가능한 속성은 다음과 같습니다. 속성 태그 Href 문서나 사이트의 주소값 Target 이동 시 표시될 위치를 지정 Download 링크 내용을 다운로드..
안녕하세요 엘빈입니다. 저번 포스팅에서는 표 관련 태그들에 대해서 알아보았는데요. 이번 포스팅에서는 웹 사이트 꾸미기의 핵심이라 할 수 있는 이미지 관련 태그들에 대해서 알아보겠습니다. 텍스트로만 웹화면을 표시한다면 밋밋한 맛이 클 것입니다. 텍스트에 각종 효과를 준다고 해도 사람들은 글보다 시청각 자료에 대해서 좀 더 잘 이해하죠. 웹에서 자주 사용하는 이미지 형식은 무엇이 있을까요?? 대부분 사용되는 파일 형식은 GIF(움직이는 이미지를 표시할 때 주로 사용), JPG(다양한 색상과 명암을 표현할 수 있음), PNG(투명 배경 등 네트워크 용으로 적합함)가 있습니다. 최근 구글에서 WEBP를 개발하였습니다. 화면에 표시할 때 기존보다 적은 용량으로 사진을 보여줄 수 있게 되었습니다. 이처럼 웹개발에 ..
안녕하세요 엘빈입니다 표는 웹 문서 자료를 정리 할 때 자주 사용하는데요. Html 문서에서 또한 표를 이용한 디자인을 많이 적용시킵니다. 이번 포스팅에서는 표와 관련된 태그들에 대해서 알아보겠습니다. 기본적인 표 만들기 기본적인 표를 만드는데 총 3가지의 태그가 사용됩니다. 기본 테이블을 형성하는 소스 코드는 다음과 같습니다. 1 2 3 4 8 9 10 11 12 내용1 13 내용2 14 내용3 15 내용4 16 17 18 내용1 19 내용2 20 내용3 21 내용4 22 23 24 25 여러 열을 묶어 스타일 지정하기 여러 개의 열에 색을 넣고 싶다면 어떻게 할까요? 각각의 행이나 열에 스타일을 지정하려면 많은 시간이 소비될 것입니다. Col, colgroup 태그를 사용하면 여러 열을 묶어 한번에 ..
안녕하세요 엘빈입니다. 저번 포스팅에서는 텍스트 관련 태그들에 대해서 알아보았는데요. 이번 포스팅에서는 메뉴를 만드는데에 중요한 목록 관련 태그들에 대해서 알아보겠습니다. 1. 순서 없는 목록을 만들때 사용하는 , 태그 순서가 필요하지 않은 목록을 만들때에는 ul,li 태그를 세트로 사용합니다. 다음과 같은 코드를 작성해봅시다. 이거는 목록 리스트입니다 이렇게 작성하면 순서없는 목록으로 표시됩니다. ul 태그 밑에 li 태그를 작성하며 실제 내용은 li 태그안에 작성합니다. 해당 코드를 브라우저로 열면 다음과 같이 화면이 표시됩니다. 화면에 표시되는 것과 같이 점 표시로 목록을 표시하며 코드 적은 순서대로 화면에 표시됩니다ㅣ. 실제 html 개발때 자주 사용되는 것은 순서가 없는 목록이 많습니다. 따라서..
안녕하세요 엘빈입니다. 저번 시간까지 html 문서의 기본 구조를 살펴보았는데요. 이번 포스팅부터 실제 html 문서를 작성하는데 사용되는 태그와 속성에 대해서 알아보겠습니다. * 텍스트를 덩어리로 묶어 주는 태그 태그들은 크게 Block 태그와 inline 태그로 나뉩니다. 지금부터 알아볼 태그들은 선택한 텍스트 글자에서만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용되는 태그들입니다. 제목을 표시하는 태그 h1입니다 h2입니다 h3입니다 h4입니다 h5입니다 h6입니다 h(숫자) 태그는 제목을 의미하는 태그입니다. 다음과 같이 작성해 봅시다. 위와 같이 h태그를 사용하면 제목과 같은 글씨체로 표시됩니다. h 뒤의 숫자가 작을수록 좀 더 큰 제목을 표시하며 작아질수록 글씨 크기가 작아집니다. ..
안녕하세요 엘빈입니다. 홈페이지는 기본적으로 html 웹 문서 형태로 구조되있습니다. 즉 우리가 일상에서 사이트를 접속하는 방식은 네트워크를 통해 웹문서를 다운로드 받고 이를 브라우저가 보여주는 형태입니다. 그렇다면 웹 문서 구조는 어떻게 구조화 되있을까요? 저번 포스팅에서 말한 것처럼 웹 편집기로는 여러가지 도구가 있습니다. 특별한 도구가 필요한 것은 아니니 메모장으로도 html 문서를 작성할 수 있는데요. 블로그 포스팅에서는 편집기로 visual studio code를 사용하겠습니다. visual studio code 설치 방법에 대해서는 아래 링크를 클릭해주세요. Visual Studio Code 설치 방법 홈페이지 만드는 것은 절대 어렵지 않아요! 그저 이렇게 상황에 맞게 태그들을 작성해주시면 됩..
웹 프로그래밍은 크게 소스코드를 작성할수 있는 '웹 편집기'와 결과화면을 볼 수 있는 '웹 브라우저'로 나누어져 있습니다. 웹 편집기와 웹 브라우저는 한 가지로 고정되어 있는 것이 아니라 종류가 정말로 다양합니다. 우리는 이 중에 각각 하나를 택해 소스코드를 작성하고 결과 화면을 볼 것입니다. # HTML 환경설정 및 기초 웹 브라우저 네이버, 구글, 페이스북 등등 우리가 접속하고 싶은 사이트를 쉽게 접근할 수 있도록 도와주는 프로그램을 웹 브라우저라고 하는데요. 웹 브라우저는 웹 편집기로 작성한 웹 문서를 화면에 표시해 주는 역할을 합니다. 현재 많은 브라우저가 존재하며 그중 사용자가 많은 대표적인 웹 브라우저만 정리해보았습니다. 각 브라우저마다 장단점이 존재하지만 2018년을 기준으로 사용 현황을 보..
웹 프로그래밍이란 무엇일까? # 웹 기반에서 동작하는 프로그래밍 방식을 뜻한다. 웹프로그래밍에 사용되는 언어는 여러가지다. # 웹 개발에는 크게 프론트엔드와 백엔드 개발로 나뉘어져있다. 간단하게 정리하자면 프론트 엔드 개발은 사용자에게 실질적으로 보여주는 화면을 개발하는 것이고 백엔드는 이 프론트엔드와 상호작용을 하며 데이터베이스와 서버를 담당하고 있다. 최근 프론트엔드와 백엔드의 경계가 허물어지면서 (점점 좋아지는 개발자 라이브러리) '풀스택' 개발도 등장하고 있다. 풀스택이란 프론트와 백엔드 모두 교차적으로 작업할 수 있는 역할을 뜻한다. 프론트엔드 언어는 HTML, CSS, JavaScript 로 구성되어 있다. 실제로 우리가 들어가는 웹 사이트 화면도 이 언어들로 구성되어 있다. 크롬 프로그램은 ..