줘니 개발블로그

선언방식에는 3가지가 있다. 내부 방식, 외부 방식, 인라인 방식. 이제까지는 공부와 실습 때는 양도 별로 없고 외부로 만들면 왔다갔다 불편하기 때문에 head태그안에 style태그를 만들어(내부 방식) 남의 집에 얹혀살았었다면, 이제는 실무에서 실제로 사용하는 선언방식을 배워보겠다! 1. 내부 방식 head태그안에 style태그를 만들어 남의 집에 얹혀사는 것! 내부방식은 실무에선 사용하지 않는다. 2. 인라인 방식 : 요소 내에 직접적으로 스타일을 지정하는 것 * 긴급 시 사용함(우선순위가 높아 인라인방식이 최종적으로 보여지게 됨) 바디태그 안 요소 내에 직접적으로 style을 지정해주면 되는데 이렇게 head태그 안 style태그에 h1을 오렌지색으로 지정했음에도 불구하고 인라인 방식의 파란색 지정..

Position : 위치를 배치하는 속성 position은 4가지로 구성되어 있다. static, relative, absolute, fixed! 1. static : 정적인 (position의 기본값) - 위치 속성이 비활성화(움직이지 않음) #static{ top: 20px; left: 15px; } static에 위치값을 넣어줘도 움직이지 않는 결과가 나온다. 2. relative : 상대적인 - 위치 속성이 활성화(움직임) - 기준 : 원래 있던 위치 (tip! 기준점을 모르겠을 때는 0,0으로 이동해보면 됨) #relative{ position: relative; top: 20px; left: 20px; } 위에 있는 사진 위치를 보면 원래 있던 위치를 기준으로 설정한 값이 움직이게 된 걸 볼 ..

CSS 직전 게시물에 display 속성을 다뤘는데 사실 display 속성에는 block, inline, none 그리고 하나가 더 있다! 그게 바로 1. Flex (flex는 중요하기 때문에 따로 빼서 적어둘거다.) flex : 레이아웃을 배치해주는 전용 기능 flex는 2가지 요소로 구성되어 있다. container와 item! - item : 내가 움직이고 싶은, 배치하고 싶은 요소 - container : 그 item의 부모요소 한 가지 요소는 item이자 container일 수 있다! 이 사진으로 설명을 해보자면, 파란네모가 item, 빨간네모가 파란네모의 container 초록네모가 item, 파란네모가 초록네모의 container 이다. 말장난 같지만,, 이렇게 이해하는 게 훨씬 쉬울 것이..

1. 공간분할태그 : 경계를 분할하거나 영역을 나눌 때 사용하는 태그 - , , 2. display 속성 1) block : 무조건 가로로 한 줄의 영역을 차지하는 속성 div, p 등 → 디폴트값이 block임 p태그가 block의 속성을 갖고 있어서 한 줄을 다 차지해 개행이 되는 것이었음..! width, height 값 설정이 가능 2) inline : 내가 담은 컨텐츠까지만 크기로 삼는 속성 span, a 등 → 디폴트값이 inline임 width, height 값 설정이 불가능 왜? → 이미 '컨텐츠'로 내가 크기를 설정을 해 놓은 것 width, height 값을 p태그, span태그 똑같이 200px로 설정했지만 inline이 디폴트값인 span태그는 크기가 달라지지 않은 것을 알 수 있다..

도대체가 끝난 줄 알았다 하면 또 나오고 또 나오고.. 끝이 없는 다꾸 ~.. 아니 웹꾸 ~^^ 1. 계층선택자 우리 반 규칙! 지각하지 않기! 결석하지 않기! 불가피할 땐 쌤한테 꼭 연락하기! 복습하기! 이 바디 태그를 가지고 오면 ↓ 1) 자손선택자 - 기호 : 띄어쓰기 div를 기준으로 자손인 span, li 색 바꾸기 헤드 태그 안에 스타일 태그를 만들고 그 안에 선택자와 선언을 쓴다. 2) 자식선택자 - 기호 : > ol을 기준으로 자식인 span의 색 hotpink ol>span{ color: hotpink; } 3) 근접후행선택자 - 기호 : + li를 기준으로 근접해서 붙어있는 li의 색 green li+li{ color: green; } 4) 후행선택자 - 기호 : ~ 첫번째 li를 기준..

나는 처음에 CSS도 프로그램을 새로 깔아서 하는 줄 알았다 ㅎ 아예 다른 과목이 아니고 HTML속에서 더 감각 있고 편리한 디자인을 위한 언어라고 부르기는 좀 그런., 기능?! 1. CSS란? : 쉽게 말하면 HTML 문서의 스타일을 꾸밀 때 사용하는 것(Cascading Style Sheets) * CSS의 기초작성 → 스타일은 설정이기 때문에 head 태그 안에 작성 다른 언어이기 때문에 style이라는 태그 내에만 작성 2. 선택자와 선언 나 디자인 할거야! - 무엇을? → 선택자★★ - 어떻게? → 선언 - 공식 : 선택자{ 선언(속성 : 값;) } 예시) body 태그안에 주황색을 쓰고, style 태그 안에 선택자(h2)와 선언작성 h2{ color:orange; background-colo..

table태그로 큰 틀을 짜서 실습을 했다! Step1 : 아이디/비번 입력 아이디 비밀번호 비밀번호 확인 Step2 : 개인정보 성별 남 여 혈액형 A형 B형 O형 AB형 생일 Step 3 : 선호도 취미 축구 야구 농구 좋아하는 색깔 Step 4 : 하고싶은 말 실습으로 하나하나 디자인을 했지만 이제 CSS를 배우면 이 코드보다 짧고, 간단하고, 더 감각있게 디자인을 할 수 있다는 것!

코드블럭 기능 최고 ~ 초반이라 길 잡기가 어렵다 이렇게 하는 게 맞나?.. 싶지만 내 공부 한다고 생각하고 하던거 마저 해 - form 태그 : 웹페이지에서 입력폼을 만들 때 사용하는 태그 ** 필수 속성 2가지 : method(전달 방식), action(전달 위치) ** 1. 입력 - input 태그 사용 : 사용자가 입력할 수 있는 공간 - input 태그 안의 여러가지 속성 1) type :입력하는 값의 종류 2) name : 입력한 값을 구분하기 위해 이름을 지정 3) placeholder : 미리보기 텍스트 4) autofocus : 자동 커서 설정 5) value : 기본 값 설정 6) readonly : 읽기 전용 지정 7) maxlength : 글자 수 제한 지정 속성을 직접 써보자! I..

1. a 태그 1) a 태그(anchor)는 필수 속성이 있다 - 어디로 이동할건지? → 필수 속성 : href 2) 현재 문서에서 다른 문서로 즉시 접근 가능(하이퍼 텍스트) - 어떻게 이동할건지? → 내용 클릭 시 이동 코드로 보면 이거 웹에는 이렇게 나온다 '네이버로 이동' 을 클릭하면 네이버 메인페이지로 즉시 접근이 가능하다. '네이버로 이동' 이라는 것보다 좀 더 간지나게 하기 위해 네이버 로고(이미지)를 누르면 네이버 페이지로 이동하게끔 만들어보자! a 태그 안에 이미지 태그를 넣어 코드를 완성해서 이 네이버 로고를 누르면 네이버 메인 페이지로 넘어간다! tip! target="_blank" 를 a 태그 속성으로 활용한다면 새로운 페이지로 네이버가 열린다 2. 테이블 태그 1) 나 표 만들거야..

이전에 쓴 글보다 더 알아먹기 쉽게 캡쳐를 많이 써야겠다 생각했다! 그 전 글은 너무 전공 책 정리하는 것처럼 써놔서 읽기가 싫어., 오늘은 리스트 태그 / 이미지 태그 / a 태그 / 테이블 태그를 배웠다. 오늘 내용은 절대 잊어선 안 될 내용 ! 1. 리스트 태그 1) 리스트 공간 선언은 2가지 - ul (unordered list) : 순서가 필요하지 않은 리스트 - ol (ordered list) : 순서가 필요한 리스트 2) 리스트 안의 실질적인 데이터 - li (list-item) : ul이든 ol이든 li태그가 꼭 필요하다! 사진을 보면 구매목록 아래 세 가지가 ul 샤브샤브 순서 아래 세 가지가 ol 이다. 위 사진을 만들기 위한 코드는 • • • 이거다! '딸기' 앞의 사각형이라던지(원래..