NeatCoder's Lab

오늘은 CSS에서 말하는 margin과 padding에 대해서 알아보도록하자. 굉장히 쉽고 또 이 부분은 box sizing과 연관되기 때문에 차근차근 익혀보도록하자. 먼저 margin과 padding에 대해서 얘기하기 전에 border에 대해서 얘기할 필요가 있다. 그리고 그림을 통해서 각각의 명칭을 알면 더욱 빠를 것이다. 모든 html요소는 박스안에 담긴다. 그리고 이 box안에 content를 담아서 화면에 렌더링을 시키는 것인데 box는 margin, border, padding, content를 담고 있다. 보면 가장 바깥에 테두리가 margin 그리고 border, 안의 여백이 padding, 그리고 그 안에 content box가 위치한 것을 볼 수 있다. 그래서 다시 본론으로 돌아와서 얘..

그리고 input input form의 가장 중요한 공통점은 이것을을 활용하여 결국 데이터가 백엔드 단으로 흘러 들어간다는 것이다. 그렇기 때문에 프론트엔드 엔지니어로서 이 두가지 태그에 대해서 알아놓는 것이 좋다고 생각한다. 먼저 에 대해서 알아보자, input 태그를 이용해서는 많은 것들을 할 수 있다. 우리가 회원가입 페이지나 뭔가 정보를 입력 받을때 이 input 태그가 사용된다. html 마크업상 간단한 사용 예시는 다음과 같다. Name (4 to 8 characters): 위의 예시를 보면 알 수 있겠지만 input에는 기본적으로 type이라는 어트리뷰트가 추가가 되어야한다. 이 type에는 html에서 제공하는 여러가지 input 형식에 따른 각기 다른 유형의 정보를 넣을 수 있게 되어있는..

HTML이 웹페이지에서 레이아웃과 큰 골격을 담당한다면 CSS는 꾸며주는 역할을 담당한다. 그래서 HTML 자체는 마크업시 문서의 개념으로 바라봐야한다고 배웠다. 그리고 CSS를 통해서는 꾸미는 작업을 해준다. Selector { property1: value; property2: value; } CSS는 기본적으로 위와 같은 문법을 사용한다. 선택자가 있고 중괄호 안에 프로퍼티와 키는 : 형식으로 마치 딕셔너리 형식으로 또는 JS에서 말하는 객체 리터럴 방식으로 작성한다. 1. 선택자 (Selector) 선택자를 이용해서는 html에 있는 요소르 선택한다. property와 value는 그 요소에 대한 세부적인 설정이라고 이해하면된다. 아래의 예제를 보면 총 세가지 종류의 property를 사용한 것을..

오늘은 총 세 가지에 대해서 알아보도록 하겠다. Hide content, Box-sizing, BFC이렇게 세가지! Hide content Hide content는 그냥 컨텐츠를 숨기는 기법이다. 거기에 뭔가 있지만 나타나지 않도록 하는 것이다. 하지만 숨겼더라도 아직도 다른 것들이 접근할 수 있도록 접근성은 고려하는 것이 좋다. 가령 예를 들면 텍스트를 읽어주는 기능이 그것을 읽을 수 있도록 해주는 것이다. 이것을 해결하기 위해서 사용하는 것이 일명 clip pattern이다. clip pattern은 웬만하면 css 속성으로 설정해주는 것이 default로 정해져있다. 다음 코드를 외워보자. .a11y-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); he..

사실 오늘 작성할 글이 Basic Syntax 1보다 먼저 나와야 했는데 HTML에 대해 공부하면서 요소라는 것이 있고 이 요소라는 것이 두가지로 분류될 수 있다고 먼저 알고 들어가는 것도 나쁘지 않을 것 같다고 생각했다.( 사실.. 글을 작성해 놓은 것 중에 저걸 먼저 작성하게 되었을 뿐이다. ) 오늘은 정말 기본적은 문법에 대해새 알아볼 것이다. HTML 문법은 너~무 쉽다. 요소 (Element) HTML은 HyperText Markup Language의 줄임말이다. 이를 해석하면 웹페이지를 기술하기 위한 마크업 언어다. 따라서 웹페이지의 내용과 구조를 담당한다. HTML은 태그라는 것을 써서 웹페이지의 내용과 구조를 만들게 된다. 그리고 이 태그로 둘러 쌓여져 있는 것을 "요소"라고 한다. 요소는..

CSS에서는 많은 방법으로 요소들을 배치시킬 수 있다. HTML은 normal flow상 모든 것들이 위에서 아래로 배치된다. 그렇다면 우리는 어떻게 수평으로 요소들을 정렬 시킬 수 있을까? 그렇게 배치하기 위해서 대표적으로 네가지 방법을 알아보도록 하자. Float를 이용한 수평정렬 본래 Float는 그림을 텍스트들이 감싸게하기 위해서 만들어진 방법이다. 먼저 어떻게 사용하는지 보자. float라는 단어처럼 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성이다. inherit : 부모 요소에서 상속한다. left: 왼쪽에 부유하는 블록 박스를 생성, 페이지 내용은 박스 오른쪽에 위치하고 위에서 아래로 흐른다. right: 오른쪽에 부유하는 블록 박스를 생성하고 페이지 내..

inline element and block element HTML의 요소들은 두가지로 분류할 수 있다. 물론 현재 이와 같은 분류는 현재의 4.01.버전 이후부터는 더욱 세분화 되었다고 한다. HTML5에서는 그래서 두가지 분류말고도 더 많은 분류가 있다고 한다. 먼저 살펴볼 것은 두 요소의 가장 큰 차이점이다. inline element와 block element의 가장 큰 차이점은 block요소에서는 줄바꿈이 일어난다는 것이다. inline element는 줄바꿈이 일어나지 않아서 가로로 쌓이고 block element는 세로로 쌓이게된다. 대표적인 block element는 ul,li가 있을 것이다. 이것들은 display: inline이라는 설정을 css에서 해주지 않으면 세로로 쌓이게된다. 둘..