[포스코X코딩온] CSS_04 position & backgound

position 속성 static : 기본값 position : static; 기본값으로 position을 지정하지 않으면 요소가 차례대로 쌓인다. absolute : 위치 상 부모 요소를 기준 부모 요소 기준으로 top, bottom, left, right 만큼의 이동할 위치가 결정된다. 이미 위치가 정해져 있는 요소의 부모가 있는 위치에서부터 위치가 움직인다고 생각하자. relative : 요소 기준으로 지정 top, bottom, left, right 로 위치 조절이 가능하다. static 과의 차이점은 좌표(top, bottom, left, right)의 동작 여부이다. 쉽게 static은 위치를 지정하지 않은 것이다. fixed : 브라우저 기준 요소가 항상 고정된 위치에 있게 하는 요소이다. ..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 7.
• textsms

[포스코X코딩온] CSS_03 속성 정리

Font 속성 font-weight - 글자의 두께를 정하는 속성 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 normal, 400 : 기본 두께 bold, 700 : 두껍게 bolder : 상위 요소보다 더 두껍게 lighter : 상위 요소보다 더 얇게 100~900 : 100단위의 숫자 9개, normal과 bold 이외 두께 font-size : 글자의 크기 16px : 기본 크기 단위 : px, ex, rem 등 단위로 지정 % : 부모 요소의 폰트 크기에 대한 비율 smaller : 상위 요소보다 작은 크기 lager..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 6.
• textsms

[포스코X코딩온] CSS_02 선택자

기본 선택자 가장 기본적인 선택자로 요소를 호출할 때 사용합니다. 전체 선택자 * HTML문서 내부의 모든 요소를 선택하는 선택자 * { color: skyblue; } 태그 선택자 태그 이름을 선택하는 선택자 노란색 li { background-color: yellow; color: blue; } 클래스 선택자 HTML clss 속성의 값 선택자 빨간색 주황색 .red { background-color: red; } .orange { background-color: orange; } 아이디 선택자 id 속성의 값 선택 초록색 #green_i { background-color: green; } 선택자 우선순위 : 전체 < tag < class < id 빨간색 주황색 클래스 지정 X 하늘색 초록색 li 태..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 5.
• textsms

[포스코X코딩온] CSS_01 적용 방식

css : html 태그에 디자인을 넣어주는 언어 선택자 : 태그, id, class 에 스타일 적용 인라인 방식 인라인 방식 각각의 태그마다 적용 시켜야하고 재사용이 불가능합니다. 내장 방식 태그 내부에 사용할 style을 미리 선언하여 태그에 같은 스타일을 적용할 수 있습니다. 다만, 해당 html 에서만 사용할 수 있습니다. 링크 방식 스타일을 하나의 css 파일에 넣고, html 파일에서 css 파일을 링크해서 사용합니다. 재사용과 스타일 변경이 생겨도 무관합니다. @import 방식 css의 @import 규칙으로 css 문서 안에서 또 다른 css 를 가져와 연결하는 방식입니다. @import url(./ex1_import.css); p{ background-color: red; color: ..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 3.
• textsms

[포스코X코딩온] HTML_02 <table> 태그 & Semantic

🙈 주절주절 테이블 하니까 급식 먹던 시절, 스터디 플래너에 있는 타임 테이블이 기억이 났다. 공부보다 10분 간격에 색만 칠하던 그때가;) 테이블 생성 표를 만들 때 사용하는 태그입니다. 과거에는 테이블을 사용하여 레이아웃을 구성했지만, 기능 상의 한계로 인하여 최근에는 공간 분할 태그인 태그를 사용합니다. 부모 태그로 행을 작성한 후 자식 요소로 칸을 작성해주는 식으로 사용합니다. : 표를 감싸는 태그 : 표 내부의 행 : 표 내부의 제목 칸, 굵은 글씨 : 행 내부의 일반 칸 메뉴 종류 가격 추가 떡볶이 분식 4,000 치즈 추가 가능 고구마 튀김 튀김 3,000 (기본 2개) 새우 튀김 튀김 3,000 (기본 2개) 치킨덮밥 덮밥 4,500 소스 추가 가능 HTML 삽입 미리보기할 수 없는 소스 ..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 3.
• textsms

[포스코X코딩온] HTML_01 구조 설명 & tag

🙈 들어가기 전 정말 아무것도 모른다는 생각으로 KDT 웹 6기 수업의 회고록 + 공부 기록을 남겨보려고 한다. 매일 하면 좋겠지만,,, "이런 것까지 적어둔다고?" 라는 생각이 들 수도 있기에 깔끔하고 간단한 글이 될 것 같지는 않다 HTML : 뼈대 텍스트, 이미지, 입력창 등 웹에서 보이는 요소(Element)를 정의한다. CSS : 디자인 HTML에서 정의된 요소에 디자인(색, 간격, 크기 등)을 부여한다. JS : 웹의 모든 동작을 처리 버튼을 누르거나 서버와 통신할 때 등의 동작처리한다. HTML 구조 설명 Hello world Hi HTML 문서는 반드시 로 시작하여 문서 형식을 HTML5로 지정해줍니다. 2번 라인부터는 과 사이에 실질적으로 문서에 필요한 정보들이 작성됩니다. 사이에는 태그..

• format_list_bulleted HTML & CSS & JS
• · 2023. 3. 2.
• textsms