듀의 자료저장소

총 6개의 텍스트태그를 정리해보았다. 1. 태그: 콘텐츠 영역 내에서 제목을 표시. ▶ 웹브라우저가 일반 글씨가 아니라, 제목으로 인식!! → 화면상 똑같이 보여도, 인식체계가 다르니 꼭 구분해서 태그를 사용해준다. 2. 태그 일반 텍스트 단락(paragraph) 3. 태그 문장 안에서 너무 길면, 줄을 바꿔준다. 엑셀에서 alt+enter 기능과 같음. 4. 태그 안으로 좀 더 들어가서 써짐. 웹브라우저에서 이쪽이 인용된 문장이라는 걸, 구분 가능해짐. 5. 태그 수평 줄을 긋기 위한 용도. html5에서는 여러개의 텍스트 단락을 사용했을 때, 주제가 바뀌는 부분에서 사용. (수평줄은 css로 제거 가능하다.) 6. 태그 html5에서 스페이스를 10칸 넘게 띄워도, 브라우저상에서는 하나만 보인다. p..

IT 공부/프론트엔드(Front-end) 2021. 7. 23. 18:47

문서의 유형(doctype)이 html이다. ▶ 현재 이 문서는 html 문서이다. 웹브라우저는 html5 문법에 따라 내용을 해석하고, 창에 띄워라! 라는 뜻. 웹브라우저 창에 나타나지 않는 내용. 대신 웹문서에 내재된 정보를 담는다. 인코딩 방법이나, 외부링크들을 가져와서 쓰는 용도. 실질적으로 화면에 드러나는 내용들 브라우저야 이제, html문법에 맞게 해석해줘! 시작과 끝을 알리는 태그. lang="ko" [지정해줘야 하는 이유] 1. 시각 장애인들을 위해 화면낭독기에서 웹문서를 읽어줄 때 기준점이 된다. (한글에 맞춰서 읽도록 자동설정) 2. 검색엔진에서도 한국어를 기준으로 검색해줌. (한국어 문서만 뜨도록 설정) title: 웹브라우저의 tab부분에 제목 표시 -meta태그는 화면 상에 드러나..

IT 공부/프론트엔드(Front-end) 2021. 7. 23. 13:09

[html에 Java 로드하기] -자바코드가 너무 기니까 script로 코드를 작성한다. -자바(java)는 끝에 무조건 세미콜론(;)을 붙인다. ▶마침표처럼 1. html요소 =input의 type/value/name onclick은 자바와 연동시켜주는 것. [자바로드하는 방법] 1. input에 바로 onclick이용해서 연동 onclick="functionAlert()" 2. addEventListener() → 리스너로 이벤트 등록해서 함수와 연동. 방법 2가지가 있음. 버튼 클릭시 1. "Hello world" alert창 표시 2. 1*2의 연산결과를 alert창 표시 ▶ addEventListener() 안쓰고, onclick으로 바로 처리한 것. onclick 대신 2번째 방법!! 1. v..

IT 공부/자바(Java) 2021. 7. 20. 13:37

[결과물] html에 JAVA입력하는 법 앞서 예제 1에서는 onclick만 사용해서 간단하게 처리했다. ▶ 이번에는 결과물은 같지만 본격적으로 java를 응용하는 예제 태그를 이용해서, JS코드 삽입하기. ▶ 내의 코드들은 js코드인 것으로 인식가능! 전체 코드는 이렇게 되어있다. 저번보다는 조금 복잡한 모습이다. 이제부터 하나씩 해석해볼 예정!! 그 전에 addEventListener개념을 생활코딩으로 들어봤다. // 과외 정리. [ addEventListener() ] 이벤트를 등록할때 제일 많이 쓴다. 장점이 여럿 있기 때문 출처: 생활코딩 강의 (아래 이미지에서부터 시작) 1. 이벤트를 button에 설치할 예정. 2. var t = document.getElementById('target');..

IT 공부/자바(Java) 2021. 7. 20. 11:27

[결과물] vscode에서 바로 자바스크립트를 실행하기! (보통은 js파일을 import해서 불러오는 식으로 많이 씀) 1. input 태그와 type/value 속성 이용 ▶ button1 만들기! 여기에 자바스크립트 명령어를 넣어줄 예정! input 태그에는 type/ name / value 속성이 있다. type: 텍스트를 적을 수 있음 value: 실제 안에 들어가는 값 name: 변수 (버튼 2개 생성) button 껍데기 2개 완성!! 2. 자바 명령어인, onclick="alert('HELLO WORLD')" 삽입 자바의 onclick event는 클릭시, "자바스크립트를 수행"!! 3. Hello world button2 만들기 결과물 완성!!

IT 공부/자바(Java) 2021. 7. 13. 16:38

[네이버와 동일한 카테고리 부분] 만들기 html 구조로 틀을 만들고, style에 css를 입혀준다. 1. 뼈대 만들기: 초록색: span 태그 이용 하얀색: span 태그 이용, div로 묶어주기 *span에는 초록색 입혀야하고, 밑에는 또 테두리선 입혀야해서 서로 분리시킴. h1+h2 h1 뒤의 h2를 초록색으로 칠해주겠다. ▶ Naver가 초록색됨. 선택자에서 ~와 +는 그 다음걸 적용한다는 뜻! (뎁스가 동일한지 여부를 잘 살펴볼 것!) h1~span: h1 뒤에 있는 span태그에 전부 초록색을 입히겠다. .box{ } span 태그에 class 연산자 붙여서, 테두리 만들어줌. ▶ border: 3px solid black; ** hover: 마우스 오버시 인터랙션 *마우스 오버: (마우스를..

IT 공부/프론트엔드(Front-end) 2021. 7. 13. 13:59

연결 선택자 = 컴비네이션 선택자 = 조합 선택자 말 그대로 두 개의 선택자를 연결하는 것이다. [하위 선택자] 상위 요소와 하위 요소 사이에 공백을 넣어서 쓴다. ▶ 부모 요소에 포함된 모든 하위 요소에 스타일이 적용. ex) section이라는 부모 요소 안의 모든 p 요소의 색상을 파란색으로 바꾼다. section p { color: blue; } section이라는 태그로 전체를 묶고 있는 게 보인다. section 태그 안의 모든 ul 태그에 스타일 적용해보기! (1px 파란색 점선을 표시할 것) 만약 문서 안에 여러개의 섹션태그가 있을 경우, id선택자를 이용해서 #container로 그 부분만 지정 가능! 이 섹션 안에만 있는 ul태그에만 적용이 된다. [자식 선택자] 부등호로 표시할 수 있..

IT 공부/프론트엔드(Front-end) 2021. 7. 6. 18:06

요건 분석 단계는 정책을 정의하는 것과 같다. 여러 사람이 같이 하는 프로젝트이므로, 기획자나 개발자들이 n명이 될 수 있다. 그래서 산출물에 대한 가이드들을 따로 정의해야 한다., 개발자 가이드, 퍼블리셔 가이드 ,디자인 가이드들이 존재하듯이 기획자도 문서별로 가이드를 만들어줘야한다. ▶ 가이드작업도 분석단계에서 실시 [환경분석] 경쟁사나 트렌드가 있는 서비스들을 벤치마킹한다. 시장 조사도 하고 업무적인 면도 분석하고, 어떤 걸 핵심으로 개선할 것인지 기준을 잡는다. [요건분석] 현재 (ASIS)에 대한 분석이 필요하다. 요구사항 정의서라는 산출물을 이 단계에서 만들어야 한다. 이 서류를 기반으로 개발이 가능한지, 리더들이나 개발자와 상의한다. [정책정의] 회원가입을 ID가 아니라, 이메일로도 가입받겠..

IT 공부/기획공부, 트렌드 분석 2021. 7. 5. 18:14