전체 글 57

공백 넣기(띄어쓰기), 줄 바꿈하는 법

html에 공백을 아~무리 많이 입력해도 결과는 공백 한 칸이다.또한 엔터를 눌러도 줄 바꿈이 되지 않는데 그럴 때는 아래의 방법을 사용하면 된다.   : Non-breaking Space로 줄 바꿈 없는 공백이란 뜻이다.  공백 1칸을 의미한다.    위의 코드처럼 공백을 여러 개 넣고 싶다면 여러 번 입력해 주면 된다.그런데 2칸 3칸을 띄어 쓰고 싶으면 어떻게 해야 할까..?   :공백 2칸 :공백 3칸   아래의 코드를 보면 위의 코드보다 1칸씩 공백이 더 존재하는 걸 볼 수 있다.      or : 줄 바꿈 태그이 태그는 self-closing tag여서 닫는 태그가 존재하지 않아줄 바꾸고 싶은 부분에 추가해 주면 된다. 노래가사를 출력하는 걸 예로 해보자    htm..

[ HTML ] 2024.06.28

[10] FLEX

FLEX LAYOUT을 만들기 위한 기본적인 HTML 구조 ➡️ 부모요소/ Flex Container        helloflex ➡️ 자식요소/ Flex Item.        abc        helloflex Flexd의 속성- 컨테이너에 적용하는 속성   * display: flex;      를 적용하는게 시작      이 한 줄 만으로 컨테이너 배치 시작          ➡️ item들은 가로 방향으로 배치, 내용물을 width 만큼만 차지, height는 컨테이너의 높이만큼 늘어남   * display: flex;       아이템 배치 보다는, 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값- 아이템에 적용하는 속성 마저 정리하기

[ CSS ] 2024.06.28

TIL - [DAY 4]

4일짼데 공부하는 법이 잘못된걸까 이해를 못하고 기억을 못한다.나만 뒤쳐지는 기분...오늘의 과제는 지난 시간에 만들었던 회원가입화면을 조금더 꾸미는 것 아직 잘 모르겠어서 강사님이 사전에 보여주신 방식을 보고 하나하나 확인하면서 변경해 만들었다.그렇게 또 아 그렇구나~ 이거구나~ 시간... 언제쯤 익숙해져서 바로 알 수 있을까?  많이 사용해봐야 기억하겠지ㅜ 그리고 오늘 배운 플랙스, 그리드를 사용해 아이템을 나눠 컨테이너를 설정해 창이 어떤 크기가 되던 웹내의 크기는 바뀌지 않게 되는 법도 알게되었다. 포폴을 만들려면 빨리 익숙해져야 할텐데 수업도 빠듯하고 저녁 식사 시간도 빠듯하다.자습시간을 아무리 가져도 모자라.. 내용이 너무 많아 ㅋㅋ 요리하는 것처럼 무엇을 만들지 구상하고 디자인하고 재료준비하..

[9] POSITION

position : HTML 태그와 요소의 위치를 지정 position: static          속성을 별도 지정하지 않으면 기본값인 static 적용          HTML에 작성된 순서 그대로 화면에 표시          top, left, bottom, right, width, height 속성값➡️ position: static 일 땐 무시, 원래 위치의 상하좌우로 안움직인다.position: relative          요소를 원래 위치를 기준으로 상대적(relative)으로 배치          top, left, bottom, right, width, height 속성값 ➡️ 원래 위치의 상하좌우로 부터 얼마나 떨어지게 할지 지정position: absolute          배..

[ CSS ] 2024.06.27

TIL - [DAY 3]

3일째....둘째 날에도 수업 들으며 아 그렇구나~이게 이거구나~ 까지만 되고 뭐 시도해 보려니 또 막히고 찾으러 가서 복붙이나 하고 있고.... (이래서 복붙한다고 했던 거구나 싶었따,,) 그렇게 정신없음 + 혼자 찾아보며 천천히 진도 나가다가 부랴부랴 + 딴길로 새서 다른 태그들 써보기....마지막은 진짜 부질없는 짓이었다는 걸 이틀이나 돼서 깨달았다...!뭐 그게 어디야... 그래도 과제는 대충 해결은 했었는데오늘건 아예 손도 못댔,,,, css 들어가는 순간 뭐가 훅 복잡해졌는데, 더 편해졌다는 것은 알겠다.어제 굳이 html시트 내에서 시간을 많이 잡아먹으며 색상이나 그림 바꾸는 걸 볼 필요가 없었다. 수업내용을 정확하게 복기하지 못하겠지만, 강의자료에 따라 따라가 보도록 하겠다. 하지만 내용이..

시작하며

수업내용 중 이해못하고 훅지나갔을때 묻는게 너무하다고 생각되는 것들을 써치하다보니 방대한 양이 있었다. 강사님이 나눠주신 자료에서 동일한 부분들도 물론 있었지만, 다른 내용들도 있고 그걸로 적용을 해보니 더 이쁘게 되길래 딴길로 샜었다. 그래서  수업내용을 정확하게 복기하지 못하겠지만, 강의자료에 따라 따라가 보도록 하겠다. (이 내용을 하루종일 수업하는 시간에 빠르게 한건데... 복습하는데 한새월.. 과제는 언제하며, 복습은 다하고 다음날이 되는 건가,,,) 전공자들은 좀 느긋하게 배웠겠지.. 난 몇달 커리 맞출려면 몇주만에 해야하고...

[ HTML ] 2024.06.27

[3] CSS 선택자

css/* 선택자 */- HTML 문서 전체 : * {~} - 태그/요소 : 특정 태그 {~} - id : #header{~}  /  id="header">    ➡️ #을 id로 받는다.  HTML 내에 id는 유일해야 해 - class : .header{~} / class="header">    ➡️ .을 class로 받는다. HTML 내에 재사용 가능 - 그룹 : ,를 이용해 단을 나누지 않고 한 번에 사용 가능    ➡️ h1 {} h2 {} h3 {} -> h1, h2, h3 {} - 복합    1. 일치선택자 : 조건을 만족해야 선택        선택자가 span.orange ➡️ 태그가 이면서 class="orange"를 가지고 있어야 적용           /* css */         ..

[ CSS ] 2024.06.27