<WEBSTORYBOY> 웹 표준 사이트 만들기 (220511 ~ 220708)

 

 

---

1편

: float을 쓰면 주변의 박스 height값이 0으로 인식되는 오류가 생기는데 이럴땐 그 주변에 박스에게 똑같이 float를 먹여주면 해결된다. 수많은 해결법중에 하나이긴한데 잘 쓰진 않는다

 

---

2편

: clear:both 를 써주면 1편에서 나왔던 float 오류를 손쉽게 해결할수 있다

---

5편

: 실무에서는 전체선택자(*)는 거의 안쓴다. 태그가 많아져서 전체선택자를 쓰면 로딩시간이 길어짐

 

---

6편

: 속성 inherit는 속성들을 상속받는다는 뜻. ex) height: inherit

 

---

7편

: 전체적으로 div 틀을 잡을때는 id로 많이 부여하고,그 밑에 세부적인 div는 class를 많이 쓴다

---

8편

: html에서 meta에는 다양한것을 삽입할수 있다. <meta name="author"> 누가 웹사이트를 제작했는지

 <meta name="description"> 사이트에 대한 설명,  <meta name="keywords"> 등등..검색엔진에 걸리게 하는것들도 삽입 가능

---

10편

: a태그 안에는 id값이 들어간다. ex) <a href="#아이디값"></a>

 a: active 링크를 눌렀을때 활성화가 되게 하는 태그 / a:focus 링크를 눌렀을때 포커싱이 되게 하는 태그

---

11편

: background-repeat 속성

background 속성을 한번에 쓰려면 이미지주소 / 정렬방법 / 반복여부 이 순서대로 한번에 쓰면 된다

---

12편

: &기호를 쓸때는 &amp; 요렇게 써야한다! 왜냐면 태그?기호중에 &가 있어서 혹시 충돌할수도 있기 때문

---

13편

:

이미지 표현 기법들

ㄴ IR효과 상세설명 : https://moo-you.tistory.com/51

웹접근성::이미지에 텍스트 설정하고 안보이게 (ir효과)

이미지 스프라이트 효과란? > 여러개의 이미지를 한데 모아놔서 백그라운드로 이미지 한개를 넣어주고 백그라운드 포지션(width/height)을 조절해가면서 나타내고 싶은 이미지들만 보여지게 하는것. 효율적이고 수정도 쉬워서 대부분 이 방법을 사용한다

*좌표값 자동으로 나타내주는 사이트 http://www.spritecow.com/

---

 

14편

: 상속 기호인 >(괄호)를 쓰게되면 그 바로 밑에 있는 자식만 적용하겠다는것이고 괄호가 없으면 자식의 자식의 자식까지..아래 까지 쭉 적용해주겠다는 의미이다

/* float: left로 인한 영역깨짐(height:0) 방지법 
1. 깨지는 영역에 똑같이 float:left를 사용한다.(X) --> 모든 박스에 float:left를 사용하게 됩니다.
2. float의 성질을 차단하는 clear: both;를 사용한다.(X) --> 어떤 영역이 깨졌는지 찾기 어려움.
3. float을 사용한 상위 박스한테 overflow: hidden을 사용합니다. (O) --> 현재는 제일 많이 사용.
4. clearfix를 사용합니다. (O)
*/

https://offbyone.tistory.com/296

CSS - overflow 속성 사용하기

---

15편

: letter-spacing 자간 조정 태그

 

 

---

18편

: 두줄짜리 문장을 한줄로 만드는 태그. 이 셋은 세트이다.

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

*텍스트 오버플로우 상세 설명 : https://aboooks.tistory.com/382

[CSS3] text-overflow 속성

---

21편

: em 태그. 텍스트를 강조해준다

 

visibility 태그

 

 

---

23편

: margin이나 padding값을 마이너스로 주면 두줄로 겹쳐보이는게 한줄로 보인다. 두줄을 한줄 효과로 보이게 하고싶을때 많이 쓰는 방법!

두줄이

 

한줄로

 

 

---

24편

: text태그 종류

 

 

---

26편

: fieldset 태그 / <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용합니다.

  legend 태그 / <fieldset> 요소의 캡션(caption)을 정의할 때 사용합니다.

<legend>학사 관리 로그인</legend>

 label 태그 / 폼 양식에 제목을 붙이는 태그 (자세한 설명 참고: https://www.codingfactory.net/11008)

 

 

---

27편

: adress태그

 

이미지 첨부 없이, 가상요소태그로 li 앞에 붙는 기호 만드는 방법 (5:55 ~ 8:00)

 

https://youtu.be/te48iZZ1548?t=355 

 

 

 

 

css / content 속성 설명

https://dasima.xyz/css-content/

CSS content 속성? before, after 및 이미지와 줄바꿈 사용법 - dasima

 

 

---

29편

: 클릭하면 나타나는 자바/제이쿼리 넣는법 요약
1.html에 script 태그 넣기 
2.원하는 섹션css에 display:none값 지정해주기
3.다시 html로 돌아가 자바 코드 입력해주기 
$(".tit .btn").click(function(e) → $("어디에 있는 어떤 부분을").click→클릭하면(function→이 효과가 작동하게 해줘(){)}

Tip!
$("cont_nav").css("display","block") 
해석 → 컨텐츠 네비의 css를 디스플레이 블럭화 시켜줘를 html자바 코드로 입력한것
이걸 html 태그로 바꿔쓰면, #cont_nav{display:block}

Tip!
$옆에 #이 붙어있으면 원하는대로 작동이 안되는데(누르면 화면이 위로 말려올라가는것. 우리가 주고 싶은 효과는,
눌렀을때 내가 보이는 시선에 맞게 화면이 열리는것) 이 효과를 깨주는것이
(function(e)) 펑션안에 e를 넣는것이다.
그리고 나서 밑에 e.preventDefault(); 이 코드를 넣어주는데 이코드는 클릭했을때 #붙은곳이 이동하는 기본값(0,0)으로 못가게
차단시켜주는 코드이다.


Tip!
$("#cont_nav").show();
저 show를 붙이면 display:block이 자동으로 되는 코드다.훨씬 간편.그밖에도 여러가지 효과 메서드들이 존재.
$("#cont_nav").fadeIn(); → 서서히 나타남
$("#cont_nav").slideDown(); →슬라이드되어 나타남
$("#cont_nav").toggle(); →없어졌다가 나타났다가 
$("#cont_nav").fadeToggle(); →서서히 나타났다가 서서히 없어짐
$("#cont_nav").slideToggle(200); →fade랑 비슷한데 더 자연스러움. 저 200은 속도를 조절하는것.




Tip!
$(this).addClass("on");
버튼을 클릭했을때 버튼이 동작하게 하는..메서드. (말그대로 .on 이라는 class값을 추가해주어 css에서 동작하게 하는 형태)
여기에 css를 추가해주면 동작이 가능하다.
ex)이미지 스프레드로 넣어준 버튼에 on을 넣고 css backgroundposition값을 조정해주면,내리기 클릭했을땐
아래로 가는 화살표 이미지가, 위로 가기 클릭했을땐 그 반대가 나오게 만들기 쌉가능
.tit .btn.on{background-position: 0 -660px;}



Tip!
$(this).toggleClass("on");
add클래스보다 더 좋은(?)만능인? toggleclass. 있으면 없애고 없으면 추가하는 거라는데..자세한 설명은 
https://www.codingfactory.net/10295



*그리고 자바에서는 부모태그에서 자기자신태그 이름를 써주고 그 아래 자식태그에서 쓸때는 굳이 그 이름을 또 안쓰고 this라고 써줌
ex)$(this).toggleClass("on");

 

---

30편

:자바스크립트 만들어진거 가져오기 순서 요약
1.html 마크업 세팅
2.css 연동
3.제이쿼리 연동
4.제이쿼리 호출

 

---

31편

:제이쿼리 해석..(나중에 생활코딩 자바/제이쿼리 기본기 강의 듣기)

 

var $tab_list = $(".tab_menu");
(제이쿼리용 tab_list라는 이름으로 변경하겠다 = html용 tab_menu를) 
*var는 변수라는 뜻



$tab_list.find("ul ul").hide();
(tab_list에 있는 ul 밑의 ul를 찾아서 감춰줘라)
$tab_list.find("li.active > ul").show();
(tab_list에 있는 .active가 붙은 li에 속해있는 ul은 보여줘라)




function tabMenu(e)☞이름을 tabmenu(e)로 해놓은것
e.preventDefault();
var $this = $(this);
☞요거는 함수인데 내가 만들었던 동작들을 저장해놓는것이다



$this.next("ul").show().
☞this버튼을 누른 다음에 ul을 보여줄것이다



parent("li").addClass("active").
☞ul의 부모인 li한테 active라는 class를 부여해준다



siblings("li").removeClass("active").
☞중복되면 안되니까 li의 형제들(siblings)한테 active이름이 붙은 class를 다 지워준다


find(">ul").hide();
☞그리고 그 밑에 있는 ul들도 마찬가지로 보여지면 안되니까 ul들을 찾아서 숨긴다


$tab_list.find("ul>li>a").click(tabMenu)
☞tqb_list를 찾아서 ul>li>a 를 클릭하면 아까 tabmenu라고 저장해놓은 함수가 작동하게 함
 

.focus(tabMenu);
☞포커스가 탭메뉴에 따라가게 한다

 

 

---

32편

:$("#layer").css("display","block")
→이런식으로 css를 자바에 넣어서 작동시킬수도 있다. 

#layer를 클릭하면 dispaly:block로 작동하게 하라

$("#layer").show() ↔ $("#layer").hide 
$("#layer").fadeIn() ↔$("#layer").fadeout()
$("#layer").slideDown() ↔$("#layer").slideUp()
(이미지 나타나고 사라지는 자바 효과들)

 

---

34편

://window.open("파일명", "팝업이름", "옵션설정");

//옵션에 들어갈수 있는것 : left, top, width, height, status, toolbar, location, menubar, scrollbars, fullscreen

 window.open("sample_popup.html","popup01","width=500","height=300",left="50",top="50",scrollbars="0",toolbar="0",menubar="0")})

이런식으로 속성의 옵션값들을 직접 써준다. " ", " "

 

 

 

 

---

 

 

 

 

5.11 ~ 7.8 완강..

아니 뭔 두달이나 걸렷냐..

얼레벌레 따라하긴 했는데 아직도 갈길이 멀어서 후련하다기보단 막막..

그래도 한게 어디야!!!

아좌좌좍...기죽지 말zㅑ...