본문 바로가기

웹 개발

 (140)
[Web_CSS] 05 실습(display) - 아래 이미지처럼 출력하기 1. float 사용 2. display - flex 사용 3. display - table 사용 실습(publishing) - 스00닷컴 publishing - 코드 MY SHOP SHOP 0 NEW ITEM 0 1위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 1위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 2위 나이키 10대,20대,30대 스포츠 전체상품 마이샵 3위 나이키 10대,20대,30대 스포츠 전체상품 마이샵
[Web_CSS] 04 실습(안쪽 여백 - padding) 저는 첫 번째 태그입니다. 저는 두 번째 태그입니다. 저는 세 번째 태그입니다. 저는 네 번째 태그입니다. 실습(display - flex) 1행 → 1열 2열 3열 4열 2행 → 1열 2열 3열 4열 3행 → 1열 2열 3열 4열 실습(display - table) 1열 2열 3열 4열 1열 2열 3열 4열
[Web_CSS] 03 ● 캐스케이딩(Cascading) - 요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. - 이때 충돌을 피하기 위해서는 CSS 적용 우선순위가 필요하다. 1. 중요도 - CSS가 어디에 선언되었는지에 따라서 우선순위가 달라진다. (1) 인라인 스타일(HTML 요소 내부에 style 속성으로 사용) (2) 내부 스타일 시트(HTML 문서의 style 태그 안에 위치) (3) 외부 스타일 시트(CSS 파일을 외부에 따로 만들어서 불러오는 방법) (4) 웹 브라우저 기본 스타일 2. 명시도 - 명확하게 특정할수록 우선순위가 높아진다. !important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자 > 전체 선택자 > 상속받은 속성 3. 선언순서 - 나중에 선언된 스타일이 우선 ..
[Web_CSS] 02 ● CSS 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용할 때 사용한다. - 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하고, 전체 선택자는 asterisk(*)기호를 사용한다. 2. HTML 요소 선택자(태그 선택자) - 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. - 선택자 위치에 태그명을 작성하면 사용된 모든 해당 태그에 동일한 스타일이 적용된다. 3. 클래스 선택자(class 속성에 부여된 값) - 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다. - 같은 클래스 이름을 가지는 요소들을 모두 선택해주고 스타일 적용 시 선택자에 ".클래스명"을 작성해준다. 4. 아이디 선택자(id 속성에 부여된 값) - 아이디 선택자는 특정 요소를 선택할 때 사용한다..
[Web_CSS] 01 ● CSS(Cascading Style Sheets) - HTML 요소들이 각종 미디어에서 어떻게 보이는 가를 정의하는 데 사용된다. - 스타일을 HTML 문서로부터 분리하는 것이 가능해진다. ● CSS를 사용하는 이유 - HTML 만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 하나하나 따로 지정해주어야 하기 때문에 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지보수가 매우 힘들어진다. - 이 문제점을 해소하기 위해서 W3C에서 만든 스타일 시트 언어가 바로 CSS이다. - 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해줌으로써 사이트의 전체 스타일을 손쉽게 제어할 수 있게 된다. - 또한 웹 사이트의 스타일을 일관성있게 유지할 수 있도록 해주며, 그에 따른 유지보수 또..
[Web_HTML] 06 ● form 태그 - 웹 페이지 내에서 사용자로부터 입력을 받을 때 사용하는 태그 - 사용자가 입력한 데이터를 다른 페이지로 전송할 때 form 태그를 사용한다. 입력 양식 태그 등 1. action - 데이터를 전송할 페이지의 경로 - 생략 시 현재 페이지 2. method - 데이터를 전송하는 방식 - 생략 시 get 방식 3. name - form 태그의 이름을 설정 - 생략 시 이름 없음 ● input 태그 - 입력 받기 위해 사용되는 태그 - 데이터를 지정하여 전달할 때 사용하는 태그 1. type : 입력 종류를 설정 2. name : value의 key값 3. value : 미리 설정해 놓을 값 4. placeholder : 값은 아니지만 미리 출력할 문구 5. readonly : 수정할 수..
[Web_HTML] 05 ● HTML 요소의 종류 ▶ display 1. 블록(block) 레벨 요소 - p, h, ul, ol, div, form, ... 등 - 웹 페이지 상에 블록을 만드는 요소 - 코드 상에 한 줄로 이어 써도 화면 상에서는 앞 뒤 요소 사이에 새로운 줄을 만들어서 나타난다. - 영역이 정확히 구분되어 있기 때문에, width와 height 속성을 수정할 수 있다. (ex) applebanana (1) margin-top , margin-bottom 속성도 잘 적용된다.(바깥 여백 상하) (2) padding-top, padding-bottom 속성도 잘 적용된다.(안쪽 여백 상하) (3) div 태그 - 다른 html 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록 요소이다. - 주로 여러 요소들의..
[Web_HTML] 04 ● 이미지 태그(싱글 태그) - 닫는 태그가 없는 싱글 태그이다. ● 이미지 태그 경로 1. 절대 경로 - 어느 위치에 있어도 찾아갈 수 있는 경로 2. 상대 경로 - 현재 위치에 따라 변경되는 경로 ● 링크 태그 HTML 링크(Link) - 현재 페이지에서 다른 페이지로 이동하고자 할 때 하이퍼링크를 사용한다. - 보통 링크라고 부르며, 태그를 사용한다. 링크를 걸어줄 내용 - href : 페이지의 경로, 사이트 주소 - target : _blank(새 창이나 새 탭), _self(현재창), _parent(부모창) ● 테이블(table) - 여러 종류의 데이터가 행과 열로 정리된 표 1. : 테이블 생성 시 사용하는 태그 2. : 행 3. , : 열 ● 병합 1. colspan - 좌에서 우로 합쳐지고..

티스토리툴바