전체 글 87

국비교육 7일차

※구조 구조: 3단, 4단 *헤더: 제일 먼저 보여줘야 하는 정보들 나열 (로고, 서치바, 로그인) 메뉴바: 헤더 안에 포함돼도 된다. *본문: 실제 필요한 정보들(콘텐츠) *푸터: 회사정보나 사이트에 대한 정보 시멘틱태그 - html5에서 추가된 태그 아무 의미 없는 block레벨. div와 같다(여백 같은 기본 css가 없다) 사람, 컴퓨터한테 태그 이름만으로 해당 박스가 어떤 박스인지 구분하기 쉽게 해 준다. - 종류 - 1) main: 중요부분 명시 기존의 wrap 부분을 대체하기도 함 2) header: 화면 상단, 섹션(박스)의 상단 3) nav: 메뉴바, 내비게이션 바 - GNB: 글로벌 내비게이션 바 사이트의 모든 페이지에서 똑같이 나오는 메뉴바 - LNB: 로컬 내비게이션 바 각 페이지마..

국비교육 2023.07.25

국비지원 6일차

오늘은 실습을 많이 나갔다. 확실히 실습을 하니 재밌기도 한데 한편으로 갈수록 어려워지는 것 같아서 걱정이 되긴 하는 것 같아... 그래서 복습을 꾸준히 해야 될 것 같다... 화.. 팅...! ※position 속성 실습 ※이건 원리만 알기 위해 하는 실습으로는 딱 적당한 것 같다. 먼저 outer클래스 안에 box클래스를 색깔별로 9개 만들고, 공통되는 클래스와 각각의 독립적이 클래스를 선언해 style을 지정해줘야 한다. -우선 outer: 가로 *세로 (500px *500px)씩 필요할 것이고 테두리(border) 필요할 것이고 box클래스들이 outer안에서 자유롭게 움직일 수 있게끔 outer에 position : relative 자식클래스 (box)에 공통적으로 absolute포지션을 선언해..

국비교육 2023.07.24

국비교육 5일차(text~)

Text1 속성 1) color: 글자색 **2) text-align: inline 요소 가운데 정렬-inline에 글자도 포함됨 (글자자체가 inline요소임) **부모에 적용한다 left(기본값) center right *3) text-decoration: 글자에 줄 긋기 underline: 밑줄 overline: 윗줄 line-through: 중앙선 *none: 선 없앰 4) text-transform: 대소문자 변경 capitalize: 각 단어의 첫 글자만 대문자로 변경 uppercase: 다 대문자 lowercase: 다 소문자 *5) text-shadow: 글자 그림자 x축 y축 번짐도 색 양수 - 우측, 하단 음수 - 왼쪽, 상단 *그림자 여러 개 적용 시 , 로 구분해서 추가할 수 있다...

국비교육 2023.07.22

국비교육 4일차(오늘은 css....)

오늘은 css를 나가는 날이다.... 아침부터 강사님의 파이팅 있는 텐션이 왠지 모를 긴장감을 느끼게 해 준다.. 하하 근데 국비학원 다니기 전에 이래저래 알아본결과로 강사와 같이 공부하는 학우들의 분위기가 중요하다고 많이 들어서 걱정이 많았다.. 그런데 요 며칠 수업을 들어본 바로는 학우분들 공부 분위기도 좋은 것 같고 , 무엇보다 강사님이 수업에 만족스러운 것 같다. (ibeleve~~~) 저희 강사님은요... 쉬는 시간도 마다하지 않고 학생들이 모르는 게 있으면 직접 다 봐주고 질문도 마다하지 않는 강사님이시다. 저희 강사님은요... 진짜 1타 강사 못지않게 열정이 남다르시다.. 그리고 유머까지 겸비하신.. 최고이시다! (다만 나만 잘 따라갈 수 있으면 좋을 것 같다.... 화.. 이팅) css기본..

국비교육 2023.07.22

국비교육 3일차 (오늘도 역시나 비내리는....)

3일 차 학원 가는 길인데 비 오는 날에 출근철을 타니 사우나를 다녀온 기분이랄까.... 비 오는 날 출근철 타시는 분들은 같은 생각을 하시는 분들이 있을 것이다..... 살... 려... 줘.....ㅠ 지난번에 이어 input에 관한 속성을 배우는 것으로 시작하였다. input속성 *1) placeholder: 필드에 힌트표시 한글자라도 치면 힌트 사라짐. 다 지우면 다시 힌트 나타남. (value와 다름) password에서도 글씨로 나옴 *2) autofocus: 자동으로 커서 표시 같은 문서에 중복으로 있는 경우 첫 번째 요소에만 적용된다. 3) readonly: 해당 필드를 읽기 전용으로 표시 4) disabled: 해당 필드를 비활성화 5) required: 해당 필드를 빈칸불가 * form태..

국비교육 2023.07.22

국비교육 2일차 (하늘이뚫렸나..비가)

오늘은 2일 차 되던 해 하늘에선 거세게 비가 내리고 있다. 덕분에 아침부터 양말이며 바지며 다 젖은 상태로 학원에 도착해서 꿉꿉한 하루로 시작한다.... 목록태그 -레벨: 블록레벨 *ul: 부모로만 사용 가능, 순서가 필요 없는 목록 ol: 부모로만 사용 가능, 순서가 필요한 목록 li: 자식으로만 사용 가능, - 속성(ul 또는 ol에서만 사용 가능한 속성) 1) type: 리스트의 모양(점, 숫자)을 처리 ul-disc(기본값, 검은 점) circle(흰점) square(검은 사각형) **none(아무것도 표시 안 함) ol-1(기본값, 정수) a(영문 소문자) A(영문 대문자) i(로마 소문자) I(로마 대문자) 2) start: (ol용) 시작점을 바꿔준다 3) reversed: (ol용) 시작..

국비교육 2023.07.22

국비교육 1일차 (Html멀까?)

HTML이란 무엇일까요? 웹 사이트에서 화면에 표시되는 정보를 약속한 것이 HTML입니다. HTML은 HyperText Markup Language의 약자. HyperText는 단순 텍스트 이상의, 링크 등의 개념이 포함된 텍스트 Markup은 꺽쇠()로 이루어진 태그를 사용하는 규격 으로, 태그들을 이용하여 텍스트 이상의 요소를 정의하는 약속된 언어라고 할 수 있습니다. 실제로 웹사이트에 표시되는 문자, 사진, 영상, 레이아웃 모두 HTML로 구성돼 있다고 나와있었다. 1. 기본문법으로는 1) 모든 HTML 태그는 ''로 끝난다 2) 대부분의 태그는 '여는 태그'와 '닫는 태그'로 구성된다. *닫는 태그에는 / 가 들어간다 3) 모든 태그는 속성을 가질 수 있다. 여는 태그의 태그명 뒤에만 넣을 수 있..

국비교육 2023.07.21