본문 바로가기

WEB/이론 정리17

[3주차] 이론 [생활코딩] CSS 1. 기본 웹브라우저는 기본적으로 코드를 html이라고 생각함. -> CSS 사용 시 사용한다는 것을 html의 문법으로 나타내줘야 함. 이때 사용하는 것이 . CSS가 나타나기 전에는 태그 이용해서 꾸밈. 태그를 사용하면 적용할 곳에 일일이 다 써줘야하지만 CSS를 사용하면 그럴 필요 x 2. 주석 : html 상의 주석 /* 내용 */ or / 내용 / : css 상의 주석 3. 스타일 지정 방법 1) style 태그 이용 (효과 지정 후 끝에 항상 ; 달아주기) -> 선택자 { 속성:값; } ㄴ 선택자 여러개를 ,를 통해 묶을 수 있음. 2) 태그 안에 style 속성 부여 4. 속성 예시 1) color : 폰트 색상 2) text-decoration : 밑줄 유무 지정 3) .. 2021. 7. 24.
[2주차] 실습 Chapter 03. 링크와 멀티미디어 1. 간단히 자기 취미 소개하는 페이지 만들기 - 관련 사이트를 요소 활용하여 연결 - 자신의 취미와 연관된 유튜브 영상을 요소로 삽입 [실행 화면] [실행 코드] [코드 설명] p 태그를 이용해서 간단하게 줄글로 취미를 소개했다. 순서없는 목록 ul 태그를 이용해서 좋아하는 노래 채널을 소개하였는데 li 태그 안에 a 태그를 걸어서 목록 사항을 누르면 해당 페이지로 넘어가게끔 링크를 걸어주었다. 마지막으로 embed 태그를 이용해서 관련된 유튜브 동영상을 가져와서 페이지에 넣어주었다. 2. 문서 내에서 링크하기 - 목차의 3가지 항목에 앵커를 달아서 목차를 클릭하면 해당 내용으로 이동 - 글은 위키피디아 등에서 긴 글로 긁어서 사용할 것 [실행 화면] [실행 코드.. 2021. 7. 18.
[2주차] 이론 Chapter 03. 링크와 멀티미디어 HTML 기본 개념 - 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결 - 하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보가 서로 연결 하이퍼텍스트 / 하이퍼미디어의 구조 - 각 정보의 조각은 링크에 의해 서로 연결 - 연결 링크를 선택하여 내비게이션 노드, 링크, 앵커 - 노드 : HTML 문서나 멀티미디어 정보를 표현하는 기본단위 - 링크 : 노드를 연결하여 내비게이션이 가능토록 함 - 앵커 : HTML 문서 내에서 링크의 출발점이나 도착점 HTML 문서에서 사용되는 링크의 종류 - 특정 단어나 문장, 혹은 이미지에서 다른 문서 - 외부 URL - 문서내 다른 지점 - 문서간 이동에 사용 - 링크의 시작점 앵커를 표현 - href 속성 : 이동하고자 .. 2021. 7. 18.
[1주차] 실습 1. 기본 문서 만들기 - Hello World!! 문구가 화면에 나타나도록 - , , , 요소만 사용할 것 [실행 화면] [실행 코드] [코드 설명] 조건 그대로 사용해야하는 태그들만 사용했다고 생각했는데 지금 보니 title 태그까지 사용한 것을 발견했다. 무심코 문서 제목을 지정해줘야한다는 생각에 넣었는데 다음부터는 조건을 유의해서 봐야겠다. html, head, body 태그는 기본 문서 구조 틀을 잡는데 사용하였고, p 태그를 통해 나타내고자 하는 내용을 화면에 보이도록 했다. 2. 간단한 자기 소개 - 간단한 자기 취미 소개 ㄴ , , , , , 요소만 사용 - 자신의 취미활동 소개하는 목록 만들기 - 표 만들기 ㄴ 자신의 시간표 - 자기소개서 만들기 [실행 화면] [실행 코드] [코드 설명].. 2021. 7. 10.
[1주차] 이론 * 운영체제 별 에디터(Editor) Windows - 메모장 Mac - 텍스트 편집기 Linux - gedit, nano, vim * 웹페이지 확장자 : html * HTML : HyperText Markup Language * 꾸미기 태그 strong : 진하게 표시 u : 밑줄 // 특정 웹페이지에 들어가서 페이지 소스보기 누르면 그 웹페이지의 소스코드 볼 수 있다. * 제목 / 단락 태그 h1 ~ h6 : 제목 (숫자가 커질수록 글씨 작아짐) br : 줄바꿈 p : 단락 표현 (단락~ 단락 간격이 고정되어있어 시각적인 자유도 낮음) // 단락 표현할 때는 br 보다는 p 태그가 더 좋다. ㄴ p 태그를 통해 단락의 경계 분명히 하고 CSS를 통해 p 태그의 디자인을 자유롭게 설정할 수 있기 때문 .. 2021. 7. 10.
[웹프첫] 중간과제 - html 태그 정리 보호되어 있는 글 입니다. 2021. 7. 10.
[웹프첫] 3주차 따라하기 실습 보호되어 있는 글 입니다. 2021. 4. 4.
[웹프첫] 2주차 따라하기 실습 보호되어 있는 글 입니다. 2021. 4. 4.