WINK-(Web & App)/HTML & CSS & JS 스터디 (128) 썸네일형 리스트형 [2024-2 웹기초 스터디 #2주차] 김민재 - CSS CSS란? CSS: Cascading Style SheetsCascading : 계단식Style : 멋을 내다Sheets : (종이) 한 장⇒ 계단식으로 스타일을 정의하는 문서HTML + CSS ⇒ 문서 열기 ⇒ 코드 해석 ⇒ 웹 페이지HTML이 없는 CSS는 사실상 의미가 없다문법 학습 및 속성의 종류기본 문법 및 사용 방법**CSS 기본 문법**선택자{ 속성명: 속성값;}선택자: 어떤 요소에 스타일을 적용할지에 대한 정보{중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)속상값 : 어떻게 정의하고 싶은가에 대한 정보HTML에 CSS를 더하려면인라인 스타일: 태그에 직접 기술하기스타일 태그: 스타일시트를 위한 태그를 추가하여 작성하.. [2024-2 웹기초 스터디] 김지수 #2주차 css란?css는 Cascading Style Sheets를 의미한다.Cascading: 계단식Style: 멋을 내다Sheets: (종이) 한 장정리하묜 계단식으로 스타일을 정의하는 문서이다. css가 일하려면css 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTM 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다. HTML: 웹 문서의 콘텐츠 구성하는 언어CSS: 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등) CSS 기본 문법 CSS 기본 문법 사용 예 주석 HTML에 CSS를 더하려면HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식들을 사용할 수 있다. 인라인 스타일: 태그에 직접.. [2024-2 웹기초 스터디] 이민형 #1주차 HTML이란 무엇일까.. HTML이란?HyperText Markup Language HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트Markup: 표시하다하이퍼 텍스트와 콘텐츠를 표시하는 언어 그게 바로 HTML 기초 문법 그리고 태그 HTML 기초 문법HTML에서 가장 중요한 것은 태그이다.그럼 태그가 뭘까? HTML에서 태그라는 것은..웹 페이지의 구조와 콘텐츠를 정의하기 위해 사용되는 코드 조각인데태그는 웹 브라우저가 해당 요소를 어떻게 해석하고 표시할지를 알려주는 역할을 한다. HTML 태그는 대부분 열림 태그와 닫힘 태그이고,열림 태그는 형식으로, 닫힘 태그는 형식으로 작성된다. 예시를 보면 이해가 쉽게 가능할 것이다.주요 태그 몇가지를 살펴보자. .. [2024-2 웹기초 스터디] 김재승 #1주차 HTMLhypertext markup language 의 약어로 관련 항목을 연결하도록 돕는 hypertext , 예를 들어 웹 1번 에서 웹 2번으로 연결하는 등 과 역할을 해주는 같은 하이퍼텍스트를 표시해주는 언어라는 뜻이다. 기본 구조위와 같이 html의 문서에는 기본 구조가 존재하는데 먼저 DTD, 즉 document type definition을 사용해서 문서형을 정의하며 html 문서 작성 시 항상 처음으로 와야한다. 과 같이 작성하곤 한다. 다음으론 html 태그가 온다(여기서 태그는 이어지는 내용에서 설명하겠다). html 태그란 html 문서의 시작과 끝을 의미한다. 따라서 모든 태그는 html 태그 안에 작성된다고 봐도 무방하다. 위 사진과 달리 이런 식으로 언어 설정을 하고 시.. [2024-2 웹기초 스터디 #1주차] 김민재 - HTML 1주차 - HTML**HTML** (HyperText Markup Language)--- HTML이란?- HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트- Markup: (콘텐츠를) 표시하다- Language: 언어 ⇒ 하이퍼 텍스트와 콘텐츠를 표시해주는 언어 쉽게 말해, 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다 문법 및 태그--- HTML 기초 문법**태그란?** HTML 코드에서 정보(콘텐츠)를 정의하는 형식 - 시작과 끝 - 과 기호를 사용해 시작과 끝을 표시 - 태그명은 동일해야 어떤 콘텐츠인지 명확하게 표시 가능- 단일 태그 - 또는 를 사용해 표시 - ex) 공백- 속성 .. [2024-2 웹기초 스터디] 김지수 #1주차 HTML 이란?HTML은 HyperText Markup Language를 의미한다. 하이퍼링크 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트, 쉡게 말해 HTML은 웹브라우저를 통해 표시되는 웹페이지 콘텐츠를 정의하기 위해 사용하는 언어이다. 완성된 HTML코드를 웹브라우저에서 로딩하면 웹페이지가 만들어 진다. HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다. HTML 문서는 파일의 확정자가 html 또는 html이다. 개발자 도구 열기 (크롬 기준) 코드 에디터코드 에디터란? 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어이다. 코드는 결국 텍스트이다. 그러나 이 텍스트를 더 빠르게, 더 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다.. [2024 신입부원 기초 스터디] 이종윤 #6주차 (웹 기초 스터디 마무리~) 이번 시간에는 마무리로 지금까지 배운 js를 활용하여 마지막 실습을 했다.실습 내용은 'stop watch' 만들기!!!이 실습을 하기 전에 선행 되어야 할 개념 부터 배우자. 1. Date 객체란?저번 시간에도 배웠지만 Date 객체는 날짜를 저장할 수 있고, 날짜와 관련된 메서드도 제공해주는 내장 객체이다. new Date()를 호출하면 새로운 Date 객체가 만들어지는데, new Date()는 다음과 같은 형태로 호출할 수 있다. 2. innerText와 innerHTML란? innerText 는 태그 안의 텍스트를 가져오거나 바꾸는 기능을 한다.(바뀌는 범위 : 텍스트 => 텍스트만 바뀜) innerHTML는 태그 자체를 가져오거나 바꾸는 기능을 한다.(바뀌는 범위 : 텍스트 => 전체 다 바뀜.. [2024 신입부원 기초 스터디] 백채린 #5주차 (Clock_실습) window.onload()- 해당 요소가 완전히 로드되었을 때, 자동으로 호출되는 함수를 지정하는 속성- 웹 페이지에 여러번 사용해도 window.onload() 함수는 하나만 적용 window.onload = () => { console.log("wink");} Data 객체 - 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체, 생성자 함수• 시간 메소드: getHours(), getMinutes(), getSeconds() ...• 날짜 메소드: getFullYear(), getMonth(), getDate() ... let date = new Date();console.log(date); //현재 날짜 및 시간 출력 innerText: Element의 속성, 해당 Element 내에서 사용.. 이전 1 2 3 4 5 ··· 16 다음
