이전 포스팅 "font"와 관련이 있는 text 관련 속성들을 배웠다. 특히 baseline은 인라인 요소와 밀접하게 관련이 있으니 제대로 알고 넘어가야겠다고 생각했다. line-height(행간) line-height 속성으로 행간의 크기를 조정할 수 있다. 기본값은 line-height: normal; (font-family에 따라 기본 line height 값이 다르다.) 숫자 단위로 폰트 크기의 배수로 값을 줄 수 있다. 소수점까지 입력 가능. line-height: 1 은 폰트 크기 1배, 즉 font-size 크기 만큼의 글자 높이를 의미한다. line-height: 2 는 font-size의 2배를 의미한다. 위 이미지의 텍스트가 들어있는 박스에는 margin과 padding 모두 0이다. ..

CSS에서 사용되는 여러 단위 css에서 사용되는 단위는 절대 길이 단위 / 상대 길이 단위가 있다. 절대 길이 단위 cm, mm, px 등 pixel (picture + element)는 '화소'를 나타내는 단위로 이미지를 표현하는 가장 작은 단위이자 CSS에서 가장 많이 쓰이는 단위이다. 상대 길이 단위 em은 부모의 font-size가 기준점이다. 즉 em=1 은 100%를 의미하여 부모의 font-size가 24px이면 em=1=24px이 된다. 만약 자식의 font-size를 0.5em 으로 설정하면 24 * 0.5 = 12 즉, 자식의 font-size는 12px이 된다. 부모 폰트의 px크기 * 자식 폰트의 em 값 = 자식 폰트의 px값 %(퍼센트)는 말 그대로 크기의 비율을 나타낸다. 기..

각 브라우저마다 제공하는 요소의 기본 스타일은 다 다르다. 나는 현재 chrome과 firefox를 번갈아가며 쓰고 있는데, 같은 속성 태그를 사용하여도 chrome과 firefox에서는 다르게 보여진다. 이러한 점은 웹페이지를 구현할 때 문제가 된다. 바로 브라우저마다 각각 다른 스타일을 만들어 적용시켜 주어야 한다는 것.... 이러한 비효율을 개선하기 위한 것이 에릭마이어의 Reset CSS https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default..

테이블. 표. 엑셀할때 정말 자주 접했던 데이터 형식이다. 엑셀에서 테이블 표를 만들 수 있듯이, HTML에서도 테이블 데이터를 만들 수 있다. HTML의 Tabular Data를 이용한 2022 달력 만들기. https://doridori-samsam.github.io/FrontendSchool_2/2022calendar/table_calendar 2022 Calendar Table doridori-samsam.github.io Tabular Data 태그는 컨테이너 요소이다. (여러가지 다른 요소들을 묶어줌) -의 자식들- - 제목 - table heading 행,열의 머리말을 나타낼 때 - 나눈 행에서 셀을 분리할 때 - 테이블 행을 나눌 때 하나의 에는 하나의 //를 사용하여야 한다. Colspa..

코드라이언 수업 6일 내용. 생화코딩 HTML/CSS 수업과 여러 css 수업을 들으면서 익숙해져 있다고 생각했지만 아직도 처음 접하거나 두리뭉실하게 알고 있는 것들이 많다. 열심히 TIL 포스팅하자.벌써 이틀이나 밀렸어.... 정신차리자 소현아 ㅠㅠ - HTML Layout 관련 footer에는 태그를 쓰지 않는다. 요소는 한번만 쓰는 것이 좋고, 당므으로 가장 포괄적인 태그로 볼 수 있다. 위젯(마이페이지, 장바구니 등)은 로 쓸 수 있다. 단독적으로 쓰이고 다른 콘텐츠가 대체할 수 없는 콘텐츠일 경우 을 쓰는게 좋다. 안에 은 하나만. 태그는 목록이 적어도 3개 이상일 때 쓰는 것이 좋다. 에도 heading이 필요하다. - 저작권이나 법률 관련 작은 문구를 나타낼 때 쓰임. - HTML Form ..

프론트엔드 스쿨 5일차, 이날 강의는 제코베도 코드라이언도 아닌 이종찬 대표님의 특강이었고 나는 그 사실을 모르고 있었다. 그런데 수업이 시작하고 줌에서 익숙한 얼굴이 보여 나도 모르게 반가움에 '어!!'하고 소리쳤다 ㅋㅋㅋ 내가 종종 보던 유튜브 '빔-캠프 코딩' 채널의 선생님이셨던 것이다! 심지어 특강 일주일 전에, 선생님 영상 중 하나를 보다가 잘 안되는 부분이 있어서 댓글을 남겼었는데 답변까지 받았었다. 그런데 멋사 수업에서 만나게 되다니.... 너무 반가웠다. 그리고 역시나 베테랑이신만큼 수업은 시간가는 줄 모르고 재밌었다. 특히 내가 CSS를 deep하게 알진 못하지만, 하면서 개념이 안잡혀있던 부분들이 어느정도 잡힌 것 같다. 아래는 배운 것 요약 정리. 태그의 width값이 지정되지 않았을..

개발자라면 무조건 알고 있어야 하는 Git과 Github. 항상 이름만 어디서 주워 들어보고 정확히 무엇인지는 알지 못했다. github도 아이디만 만들어 놓은 상태였고. 4일차에는 Git과 Github이 뭔지, 그리고 어떻게 사용하는지 찍먹을 해보았다. +참고용 초보자용 git 튜토리얼 링크 - https://backlog.com/git-tutorial/kr/intro/intro1_1.html Git이란? 우선, Git이 생겨나서 코딩 및 프로그래밍을 할 때 아래와 같은 문제점을 해결 할 수 있다. - 수정할 때마다 파일 저장하고 압축하기 - 수정다 했는데 이전버전 필요하면 불러올 수 있다 - 다른 작업을 합병해야할 때 - 협엽을 할때 (다른 사람의 코드를 내가 다운받고, 수정하고 다시 내가 수정한 파..

Text-level semantics 태그의 특징들 공간을 얼마나 차지하느냐? (box의 사이즈) 그루핑 요소들은 화면을 다 차지함(inline) 태그 포함 텍스트 요소들은 자기 텍스트 크기 만큼만 차지함(block-level) - 줄바꿈을 위한 기능적인 태그 - 화면이 텍스트보다 작아질 때 줄바꿈을 해주는 것. Wbr을 넣어준 지점부터 줄이 바꿔진다. - white space(공백)이 있으면 줄바꿈을 하는 것 (텍스트 길이보다 화면이 작아지면) - 텍스트 굵은 글씨 표현. 잘 사용하지 않음 - 똑같이 굵게 표현하지만 중요도를 표현할 수 있음 - 이태릭체로 기울임 글꼴 나타냄 (html5 이후로는 주 언어와 다른 언어로 표현될 때, 다른 글들과 구분해야할 부분을 표현해야 할 때 사용) - emphasiz..

내가 HTML을 처음 접했을 때는 바야흐로 2002년 한일 월드컵이 끝난지 얼마 안됐을 시점... 그 때 처음으로 집에 컴퓨터란 것을 놓게 되었고(사촌오빠가 새컴터 산다고 쓰던거 줬었음) 컴퓨터가 생겼다는 사실 하나만으로 참 설레었었고, 학교를 마치면 컴퓨터하려고 바로 집으로 뛰어갔다. 인터넷이 집에 설치가 안되었음에도 불구하고........ 윈도우에 기본으로 설치되어 있는 지뢰찾기게임을 하려고 ㅋㅋㅋ 학교를 마치고 그리 뛰어갔었지. 그러다가 컴퓨터 상대로 하는 스타크래프트도 해보다가 인터넷이 없으면 컴퓨터로 할 수 있는건 얼마 없다는 것을 곧 깨닫고 인터넷 연결을 위해 별짓을 다 했다. 그때 나는 뭣도모르는 꼬마라 이것 저것 클릭해보고 전화모뎀 연결이란게 있길래 전화선을 컴퓨터에 꼽으려 해보기도 하고...