홍장군의 기록

0. 오늘의 배울 것 프로젝트를 짜다보면 클래스 이름을 지을 때가 가장 난감하다. 조악한 영어 실력으로 단어 더듬더듬 이어가며 클래스 이름을 지으니 자꾸 이름이 겹치고 헷갈리고 만다. 그래서 이번 포스팅에서는 네이밍 방법론 중 하나인 BEM에 대해 알아보려 한다!! 클래스든, 변수든, 함수든, 남들이 (+ 미래의 나) 알아보기 쉽게 이름을 짓는 것은 매우 중요하다! 이렇게 네이밍하는 데에 사람들이 만들어둔 규칙들이 있다. 여러가지 방법론이 있지만, 오늘은 그 중에서도 많은 곳에서 채택된 BEM 방법론에 대해 알아볼 것이다. 1. BEM이란? B lock E lement M odifier 의 줄임말로, 클래스 이름을 지을 때 block - element - modifier 순으로 이름을 짓자는 방법론이다...

0. 오늘의 배울 것 grid 는 2차원적 배치 방식이다!! 앞서 flex box는 1차원적 배치 방식이라고 말했다. container 박스 안에, 가로든 세로든 한 방향으로 일렬 정렬하기 때문이다. 이 대신 바둑판처럼, 즉 2차원배열처럼 요소를 배치하려면 부모 박스에 grid 속성을 주어야 한다. 이번 포스팅에서는 그리드를 어떻게 활용할지 알아보자. 1. 그리드, Grid? flex는 1차원적으로 한 방향으로 요소를 배치한다면, grid는 2차원적으로 바둑판처럼 요소를 배치한다. 이 때 각 칸을 나누는 줄을 그리드 라인이라 한다. 그리고 각 칸을 그리드 셀이라고 한다. 2. 그리드 나누기 먼저 요소를 담을 컨테이너를 grid 형식으로 만들어보자. 아래 코드를 예시로 들면, 2행 3열로 나누고 세로를 5..

0. 오늘의 배울 것 flex box는 display 속성의 값 중 하나이다!! 앞에서 배운 display 속성 값에는 block, inline, inline-block이 있다. 이 속성들은 각 요소가 부모 요소 내에서 어떻게 배치될지 나타내주었다. 그런데 flex box는, 태그 내 요소들이 어떤 방향으로 배치될지 흐름을 정해준다. 즉, 내가 a, b, c 요소를 위에서 아래로 배치하고 싶다면 a, b, c를 감싸는 부모 요소 parent를 만들고, parent의 display 속성에 flex 값을 주는 것이다. flex box는 gap, align-center 등 여러 속성이 있어 다양하게 활용할 수 있다. 이번에는 이 flex box를 활용하는 법에 대해 알아보자. 1. flex box flex-b..

HTML html 태그의 기본 문법을 알아보자!! html 파일 자체의 정보를 나타내자. html 파일에 정보값을 주기 위해 메타 태그나 시맨틱 태그를 활용할 수 있다. 1. html이란 css는 웹의 디자인을 꾸미는 부가적인 요소로, 웹을 이루는 기본 뼈대는 결국 html이다!! html: Hypertext Markup Language 의 줄임말 하이퍼텍스트: 서로 링크로 연결된 문서를 뜻함. 무슨 단어를 클릭하면 다른 링크로 넘어가는 등, 웹들은 서로 다른 여러 링크들로 연결되어있다. 마크업: 마크업은 실질적인 내용이 아니라 내용에 제목, 이미지, 링크 등의 표시를 해주는 것이다!! 즉, 이것은 그냥 제목 내용이고 이렇게 태그로 제목이라는 마크업을해준다. 마크업 랭귀지: 마크업할 때 쓰는 언어. 즉,..

0. 오늘의 배울 것. positon은 display에서 벗어난 새로운 위치!! 기본적으로 모든 태그는 display 속성을 가지고 있다. 이 display 속성을 통해, 요소들이 한 파일 내에서 어떻게 배치될지 정해지는 것이다. 그런데 내가 기본적인 display 흐름 말고, 다른 식으로 배치하고 싶다면 어떻게 할까? 예쁜 사이트에서 보이는 navigation bar 처럼 브라우저 위에 딱 붙어있거나, 어떤 요소 위에 둥둥 떠있게 하거나 등, 다양한 배치를 하고 싶다면 어떻게 해야 할까. 이렇게 기본적인 display 흐름에서 벗어난 곳에 배치하기 위해, position이라는 속성을 사용한다. 이번 시간에는 position 속성의 속성 값에는 무엇이 있는지, 그리고 어떤 효과가 있는지를 알아보자. 1...

(css는 사실 cascading style sheets의 줄임말이다. cascading은 '위에서 아래로 흐르는' 이라는 뜻인데, 왜 이런 뜻이 있을지 알아보자.) 0. 오늘의 배울 것 css의 선택자를 잘 써먹어야 코드가 예쁘다!! css를 작성할 때엔, 스타일을 지정할 선택자를 고르고 그 선택자에 스타일을 선언하면 된다. 그런데 사실, 선택자는 단순히 태그나 class, id 이름만 적는 곳이 아니다! class 이름을 여러 개 섞을 수도 있고, class 내부 하위 태그를 선택할 수도 있다. 선택자를 쓰는 법을 알아보자. css에도 상속이 있다. css도 프로그래밍 언어처럼 스타일을 상속한다! 부모 태그에 스타일을 주면, 그의 자식 태그에게도 그 스타일이 상속된다. 그런데 만약 하나의 속성이 여러..

0. 오늘의 배울 것. html 태그들은 박스모델을 따른다! 요소가 박스 안에 차곡차곡 쌓여있는 듯한 구조이기에, 박스모델 box model이라 불린다. 하나의 요소에 margin, border, padding, content 영역이 박스처럼 각자 자신의 영역을 차지하기 때문에 css를 잘 다루기 위해선 이 모델을 잘 알고, 각 속성을 어떻게 다루는지 파악해야 한다. 각 박스모델 태그들이 html이라는 하나의 파일 내부에서 어디에 놓일지 기본적으로 주어지는 위치 흐름이 바로 디스플레이다! html은 여러 요소들로 이루어졌다. 우리가 div 태그를 연달아서 쓰면 div 태그들은 박스가 차곡차곡 쌓이듯 위에서 아래로 배치된다. 반면에 span 태그를 여러 개 쓰면, span 태그들은 줄줄이 소세지처럼 연달아..

(css를 배울 때 가장 신기했던건 class나 id 이름으로 하이픈을 넣을 수 있단 것이었다...) 0. css의 기본 개념. html이 너무 길어지면 각 태그 하나하나에 style을 넣는 건 너무 번거로워진다. 때문에 각 태그들에게 어떤 style을 적용해줄지 규칙을 세워야 한다. 바로 이렇게 h1에 대한 규칙을 세우듯 태그들의 규칙을 세워 style을 적용하는 게 좋다. 즉, css를 개발한다는 것은 css 규칙을 만든다는 것이다. 1. css 규칙 html 의 내용과 그에 대한 css를 분리하는 것을 관심사의 분리, seperation of concern 이라고 한다. 관심사 분리의 장점: 내용과 스타일을 고치기 편하다. css 규칙은 선택자와 선언의 짝으로 이루어졌다. 선택자란 어떤 요소에 규칙..

0. html과 css란? html과 css는 웹사이트를 만들 때에 쓰는 프로그래밍 언어이다. 이 언어로 짠 코드를 소스코드 라고 하며, 코드를 작성하는 행위를 코딩 한다고 한다. html은 웹의 내용을 표시하는 프로그래밍 언어이다. css는 웹의 디자인을 꾸며주는 프로그래밍 언어로 cascading style sheet의 줄임말이다. html은 기본적으로 꺾쇠 기호를 사용해 시작태그와 종료태그로 내용을 감싸 표시한다. 각 태그에는 저마다 속성들이 있어 속성값을 부여해 커스텀할 수 있다. 1. 사이트에 이름 붙이기 이 이름 title은 웹 페이지에 나타나진 않되 페이지의 정보를 나타내주므로 head 태그 내부에 작성해준다. 2. 한글이 깨질 때 웹페이지의 문자들을 기계어로 바꾸어 컴퓨터가 이해하게 하는 ..