WINK-(Web & App)/HTML & CSS & JS 스터디 (128) 썸네일형 리스트형 [2023 신입부원 기초 스터디] 최종은 #2주차 - CSS알아가기 CSS란? css: 웹에 표현되는 방법을 정해주는 마크업 언어 CSS의 적용 방법 1.인라인 스타일: HTML 태그 내부에 스타일 속성을 사용하여 스타일을 적용하는 방법 2.내부 스타일: 태그 내부에 단위 em,rem px rem em vw vh .... 픽셀 단위 루트 요소의 글꼴 크기 요소의 글꼴 크기 viewport 너비의 1% viwport 높이의 1% 글자 색상 color속성으로 지정하며 16진수(Ex: #ff0000),rgb(rgb(0,0,0),hsl,색상이름(black) 사용 가능 ... 위에 것들 외에 매우 다양한 글자 관련 속성이 있음 필요할 때 마다 찾아서 사용! CSS Box Model Box Model: 웹 페이지에서 HTML요소가 차지하는 일정 공간 content padding .. [2023 신입부원 기초 스터디] 박민규 #1주차 - 기초부터 확실히! (태그정리) VS CODE 단축키: ctrl + alt + 방향키 : 여러줄 입력 shif 방향키 : 여러 줄 상태에서 동시에 글 드래그 ctrl 오른쪽 방향키 : 줄에서 가장 오른쪽으로 이동 구조 : 제목 문서 기본 구조 : 내용 #item ---> span.title ---> ,title ---> p.container{Hello Word~!} ---> Hello World~! p.container{item$}*3 ---> item1 item2 item3 글꼴태그 : ~ : 제목태그 : 문단나누기 태그 : 가로 선 태그 : 줄 바꿈 태그 : 이텔릭체 태그 : 이텔릭체 강조 태그 : 강하게 표시 태그 : 진하게 강조 표시 태그 목록태그: : 순서 있는 목록 태그 : 순서 없는 목록 태그 : 목록 하위 태그 : 용어 .. [2023 신입부원 기초 스터디] 도승준 #1주차 - 레전드가 어쩌구.. 필드셋이 저쩌구.. HTML이란? - Hyper Text Markup Language의 약자로 , 웹 페이지를 만드는 언어이다. 1)HTML의 구조 강의를 들으며 실습한 코드를 따온 것인데, 위에서 보다시피 기본적으로 DOCTYPE, HTML,HEAD,BODY로 구성되어 있다. 2)태그 구조 위와 같이 이루어져있는데, 태그 사이에 콘텐츠를 넣어주어 사용한다. 3) 글꼴 태그 글꼴 태그에는 정말 다양한 태그들이 있는데, 기억에 남는 두 내용만 정리하자면 /태그의 차이와 /태그의 차이이다. 와 는 각각 단지 글씨를 굵게 해주고 이탤릭채로 기울이게 해주는 태그이지만? 과 태그는 '정말 강조하고싶은 내용이 있을 때' 사용하는 태그로써 사용하여 만약 시각장애인이신 분이 웹을 읽어주는 프로그램을 사용해 웹 문서의 내용을 청각적으로 듣.. [2023 신입부원 기초 스터디] 최종은 #1주차 - HTML알아가기 1.HTML이란? Hyper Text Markup Language HTML: 태그를 이용한 마크업 언어(프로그래밍 언어 X) Tag: HTML을 구성하는 요소 (주석==메모) Emmet: HTML에서 제공하는 자동완성기능 (공식 사이트가 있으니 참고 가능) ! > + * # . {} $ HTML 기본 구성 자식노드 생성(Ex: div>ul ) 형제노드 (Ex: div>ul+ol ) 반복 생성 (Ex: div>ul>li*3) 아이디 생성 (Ex:#id , ul#id) 클래스 생성 (Ex: .class, ol.class) 콘텐츠 생성 (Ex: p.cntainer{Hello, HTML!} ) 자동 넘버링 (Ex: p.num{test$}*3) 폰트(Font) 태그 글꼴 Tag 태그 ~ 역할 제목,부제목 표현 문.. [2023 신입부원 기초 스터디] 박승환 #1주차 - 웹 씨앗을 심었다!(HTML 배우기) [정리노트] ▶HTML이란? Hyper Text Markup Language의 약자로 웹 페이지를 만드는 언어이다. ▶HTML 태그 구조 제목 ▶HTML의 문서 기본 구조 →이런식으로 구성이 되었있다. 이를 일일이 코드를 작성하면 힘들기 때문에 세팅 된 ▶Emmet기능 -자동완성 기능을 제공하여, 작성 시간을 아주 빠르게 단축 시켜주는 확장기능 ▶HTML기본 태그 ~ 웹 페이지의 제목 or 부제목 표현, 숫자가 작을 수록 큰 제목. 문단 가로 선(종료태그 없음) 줄바꿈 태그, HTML에서 개행 역할 (종료태그 없음) 텍스트를 기울임(이텔릭체) 텍스트를 기울임(이텔릭체) #강조할 때 사용 텍스트를 진하게 표시 텍스트를 진하게 표시 #강조할 때 사용 순서가 있는 목록 순서가 없는 목록 목록하위 항목 , 태그.. [2023 신입부원 기초 스터디] 정찬우 #1주차 - HTML은 즐거워...?? HTML이란? 가장먼저 웹 사이트를 만들기위해 기본적으로 HTML, CSS, JavaScript를 사용합니다. HTML -- 웹사이트의 기본적인 틀을 만드는 역할. CSS -- HTML로 만든 기본 틀을 꾸미는 역할. JavaScript -- HTML과 CSS로 만든 틀을 동작하게 만드는 역할 HTML 태그(Tag) HTML 태그는 웹 문서에 어떤 표시를 해주는 것입니다. 예를들면 글자 크기, 글자색, 글자 모양 등을 변경하거나 하이퍼 링크와 같은 문서연결 기능을 넣을 수도 있습니다. 태그 구조 HTML 태그는 다음과 같은 구조로 이루어져 있습니다. HTML 주석 주석은 HTML 소스 내에 메모를 남기는 것을 말합니다. 사용법 - 메모내용란에 메모할 문자를 작성한다 그 전체 한번에 주석하는 방법이 있었는.. [2023 신입부원 기초 스터디] 한승훈 #1주차-HTML 기초 안녕하세요, 신입부원 한승훈입니다. 만나서 반갑습니다. 기초 스터디로 여러분을 만나뵙게 되어 영광이고, 현재는 아는 것이 적지만 최선을 다해서 함께 공부하겠습니다. 섹션 0.강의소개 & 개발환경 구성 섹션 0은 강의에 대한 설명, 즉 강의에 대한 설명과 VS Code 를 사용하는 것에 대한 강의였습니다. 이전에도 python에 VS Code를 사용하긴 했지만, 보조 툴을 설치하며 보다 편리하고 가독성이 좋은 환경을 구축하였습니다. 섹션 1. HTML이란? 시작하기 전에! 코드 자동완성 시스템은 Emmet에 대한 학습이 주를 이루었습니다. .html파일로 저장한 뒤, !+Tab으로 맨 위 부터 마지막 까지 자동 완성이 되었고, 이렇게 두 body 사이에 본문을 입력할 수 있고, Live Server를 통하.. [2023 신입부원 기초 스터디] 조상혁 #1주차 - HTML알아가기 html을 간편하게 사용하기 위한 emmet 시작할 때는 ! 다음 Tab을 누르면 기본서식이 나온다. 🏷️ 에멧(Emmet) 문법 모음 - 한눈에 정리 Emmet (에밋) 에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동 inpa.tistory.com HTML CSS 코드짤 때 유용한 Emmet 그리고 부가기능들 - 코딩애플 온라인 강좌 여러분의 HTML 창작 능력을 빠르게 도와줄 몇가지 부가기능을 소개해드리겠습니다. VS code, Atom 등 다른 에디터를 사용하셔도 유사한 부가기능이 있을 것이니 한번 찾아보시면 되겠습니다. 0. 부 codingapple.co.. 이전 1 ··· 12 13 14 15 16 다음
